Vuex的使用

安装；

　　

npm i vuex

创建store文件夹，包含count.js perosn.js 以及汇总的index.js

　　count.js:

export default{
        namespaced:true,
        actions:{
            waitJia(context,val){
                context.commit('JiaWait', val)
            },
            Jijia(context,val){
                context.commit('JiaAdd', val)
            }
        },
        mutations:{
            Jia(state,val){
                state.num += 1
            },
            Jian(state,val){
                state.num -= 1
            },
            JiaWait(state,val){
                setTimeout(()=>{
                    state.num += 1
                },300)
            },
            JiaAdd(state,val){
                if (state.num % 2)state.num += 1 
            }
        },
        state:{
            num : 6
        }
}

person.js类似

index.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//引入count.js
import count from './count'
//引入person.js
import person from './person'
 export default new Vuex.Store({
     modules:{
         countAbout:count,
         personAbout:person
     }
 })

main.js 引入注册vuex:

import store from './store';
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

count.vue:

<h2>{{getNum}}</h2>
<!--获取person组件的值-->
<h2>{{getName}}</h2>
<!--方法要传参，否则用map生成的方法参数会默认为$event-->
<button @click="add(sum)">+</button>
<button @click="del(sum)">-</button>
<button @click="waitJia(sum)">等会加</button>
<button @click="Jijia(sum)">奇数加</button>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'Count',
  data(){
      return{
          sum:1
      }
  },
  computed:{
      ...mapState('countAbout',{getNum:'num'}),
      ...mapState('personAbout',{getName:'name'})
  },
  methods:{
      //对象写法，生成add方法和del方法
      ...mapMutations('countAbout',{add:'Jia',del:'Jian'}),
      //数组写法，生成Jijia方法和waitJia方法
      ...mapActions('countAbout',['Jijia','waitJia']),
  }
}
</script>