vue2中vuex的终极模块化和使用

1.在src目录下新建一个store文件夹，在此文件夹下新建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import chanNum from "./chanNum";

Vue.use(Vuex)
//此模块为第二步你需要引入的内容
export default new Vuex.Store({
  modules: {
    chanNum
  }
})

2.在store文件夹下新建一个你所需要的大模块(我这里取名为chanNum)

export default {
  namespaced: true,//添加命名空间 是让组件中所写的chanNum的文件夹名称起作用
  state:{
    num: 222,
  },
  getters: {
    dbNum(state) {
      return state.num * 2
    },
  },
  mutations: {
    chanNum(state,payload) {
      state.num += payload
    }
  },
  actions: {
    // asyncChanNum({commit},payload){ //可解构直接使用
    asyncChanNum(context,payload){
      setTimeout(() => {
        context.commit('chanNum',payload)
      }, 1000);
    }
  },
  modules: {},
};

3.在main.js中引入和挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

4.在相应的组件中使用

<template>
  <div>
    {{$store.state.chanNum.num}} <br>
    {{num}} <br>
    {{dbNum}}
    <hr>
    <h1>方法点击实现</h1>
    <button @click="chanNum(10)">给我点</button>
    <button @click="asyncChanNum(100)">给我异步点</button>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default {
  data () {
    return {
      
    }
  },
  methods: {
    ...mapMutations({
      chanNum:'chanNum/chanNum'
    }),
    ...mapActions({
      asyncChanNum:'chanNum/asyncChanNum'
    })
  },
  computed: {
    ...mapState({
      num:state=>state.chanNum.num
    }),
    // 模块化 获取getter
    ...mapGetters({
      dbNum:'chanNum/dbNum',//这就是你所定义的文件夹的名称
    })
  }
}
</script>

5.到这里其实就已经结束，但是假如模块内的内容过多，我们还可以在细分

//比如state的内容很多，我们可以在建立一个state.js文件 并写入内容导入
export default {
  num: 222,
};
// 其他模块可以 照旧

5.1然后在chanNum文件夹的index.js中引入（其他模块照旧）

import state from "./state.js";

export default {
  namespaced: true,//添加命名空间 是让组件中所写的chanNum的文件夹名称起作用
  state,
};