[JavaScript知识库]vue之vuex的简单使用简化写法

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//状态对象
const state={
  counter:0
}
//包含多个更新state函数的对象
const mutations={
  ADD(state){
    state.counter++
  },JJ(state){
    state.counter--
  }
}
//包含多个事件回调函数的对象,actions调用mutations
const actions={
  add({commit}){
    commit('ADD');
  },
  jj({commit}){
    commit('JJ');
  },
  //待条件的action
  jjadd({commit,state}){
    if(state.counter%2===1)
    commit('ADD');
  },
  autoadd({commit}){
    setTimeout(()=>{
      commit('ADD');
    },1000)
  }
}
//包含多个更新state函数的对象
const getters={
  desc(state){//不需要亲自调用，只需要读取属性值
    return state.counter%2===0?'偶数':'奇数';
  }
}
export default new Vuex.Store({
  state,//状态对象
  mutations,//包含多个更新state函数的对象
  actions,//包含多个事件回调函数的对象
  getters//包含多个getter计算属性函数的对象
})

mian.js

//入口js，创建vue实例
import Vue from 'vue'

import App from './App.vue'

import store from './store'


new Vue({
  el:'#app',
  components:{
    App,

  },
  template:'<App/>',
  store,//所有的组件对象都多了一个$store属性
})

vue.app

<template>
<div>
<!--  <p>clicked  {{$store.state.counter}},counter is {{desc}}</p>-->
  <p>clicked  {{counter}},counter is {{desc2}} </p>
  <p>
    <button @click="add">+</button>
    <button @click="jj">-</button>
    <button @click="jjadd">奇数+1</button>
    <button @click="autoadd">过一秒自动+1</button>
  </p>
</div>

</template>

<script>
/*简化代码,（模板里数据尽量和store里的属性）尽量同名，同名直接用数组，不同名用map来对应*/
import {mapState,mapGetters,mapActions} from 'vuex';
export default {

  name:'App',
  data(){
    return {

    }
  },
  computed:{
    ...mapState(['counter']),
    ...mapGetters({desc2:'desc'}),/*不同名的情况*/
  },
  methods:{
    ...mapActions(['add','jj','jjadd','autoadd']),
  }

} 
</script>
<style>


</style>