8. Vuex 文件结构

Vuex 组织文件结构

  • 概述

    由于 stategettersmutationsactionsmodules 都放在 store 文件夹的 index.js 文件内,不便于后期维护。故将 index 文件内容进行抽离。

  • 文件结构

  • 文件内容

    • store/index.js

      import Vue from 'vue'
      import Vuex from 'vuex'
      import module_a from "@/store/modules/module_a";
      import module_b from "@/store/modules/module_b";
      import getters from "@/store/getters";
      import mutations from "@/store/mutations";
      import actions from "@/store/actions";
      
      Vue.use(Vuex)
      
      const store = new Vuex.Store({
          state: {
              data_1: 1,
              data_2: 2,
              data_3: 3
          },
          getters,
          mutations,
          actions,
          modules: {
              a: module_a,
              b: module_b
          }
      })
      
      export default store
      
    • store/getters.js

      export default {
          total(state) {
              let total=0
              for(let key in state){
                  total += state[key]
              }
              return total
          }
      }
      
    • store/mutations.js

      export default {
          increment(state) {
              state.data_1++
          }
      }
      
    • store/actions.js

      export default {
          asyncIncrement(context) {
              setTimeout(()=>{
                  context.commit('increment')
              }, 1000)
          }
      }
      
    • store/modules/module_a.js

      export default {
          state: ()=>{
      
          }
      }
      
    • store/mudules/module_b.js

      export default {
          state: ()=>{
      
          }
      }
      
展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值