vuex的模块化

1.在单独的模块中

export default{
  namespaced: true, //开启命名空间 模块化必须的设置
  state: {
    num: 66,
    name: '皮皮',
    age: '03',
  },
  getters: {
    getSum: state => { return state.num + 10}
  },
  mutations: {
    onPlus(state,id){
     state.num += 10
      console.log(state.num,id);
    },
    MITT(state){
      state.num -= 5
    }
  },
  actions: {
    onMitt({commit}){
      commit('MITT')
    }
  },
}

2.在vuex的index文件中

import Vue from 'vue'
import Vuex from 'vuex'
import number from './Number';
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  // 模块化 设置
  modules: {
    number,
  }
})

3.在其他组件中

<template>
  <div class="hello">
    {{ num }}-{{ name }}-{{ age }}
    <p>{{ getSum }}</p>
    <button @click="onPlus(99999)">+10</button>
    <button @click="onMitt">-5</button>
  </div>
</template>

<script>
// 使用辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
 // name: "HelloWorld",
 // props: {
   // msg: String,
 // },
  computed: {
                // 第一个参数是模块的名字 第二个参数是数组
    ...mapState('number',['num','name','age']), // 获取vuex中状态属性
                  // 第一个参数是模块的名字 第二个参数是数组
    ...mapGetters('number',['getSum']) //对于状态属性的加工处理后的返回状态
  },
  methods:{
                    // 第一个参数是模块的名字 第二个参数是数组
    ...mapMutations('number',['onPlus']), // 直接修改属性
                    // 第一个参数是模块的名字 第二个参数是数组
    ...mapActions('number',['onMitt']) // 间接修改属性
  }
};
</script>