逐步封裝VUEX

官網：https://vuex.vuejs.org/zh/

前言（摘自官方說明）：

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

準備工作：

1、安裝VUEX，npm install vuex --save
2、導入VUEX，main.js裏添加 import store from ‘./store’
3、在src下創建store文件，添加index.js，添加modules文件夾（結構可參考官方）
4、谷歌瀏覽器Google Chrome安裝官方調試工具（安裝以後F12即可看到Vue選項，如圖：）

1.0版本

const store = new Vuex.Store({
    //狀態管理，獲取狀態：$store.state.狀態名稱
    state:{
        indexcategory:[],//首頁菜單
    },
    //修改狀態，修改state：$store.commit('mutations名稱',數據)
    mutations:{
        indexcategory (state,arr) {
            // 變更狀態
            state.indexcategory=arr;
        },
    },
    //action類似於mutation，action提交給mutation，不可以更改狀態，action可以異步操作。修改mutations：$store.dispatch('actions名稱')
    actions:{
        //首頁類別
        indexcategory() {
            axios.post("/indexcategory").then(response => {
                if (response.data) {
                    console.log(response.data.data.list);
                    store.commit('indexcategory',response.data.data.list)
                }
            })
        }
    },
    //屬性計算
    getters:{
    }
});

2.0版本

//提交getters：$store.getters['模塊名稱/方法']，
//提交actions：$store.dispatch('模塊名稱/方法')，
//提交mutations：$store.commit('模塊名稱/方法')
const moduleA = {
    namespaced: true,
    state: () => ({
        //狀態管理
        indexcategory:[],
    }),
    mutations: {
        //變更狀態
        indexcategory (state,arr) {
            state.indexcategory=arr
        }
    },
    actions: {
        //異步請求獲取數據後傳給mutations修改狀態
        indexcategory() {
            axios.post("/indexcategory").then(response => {
                if (response.data) {
                    console.log(response.data.data.list);
                    store.commit('moduleA/indexcategory',response.data.data.list)
                }
            })
        }
    },
    getters: {
        //計算屬性
    }
}
const store = new Vuex.Store({
    modules: {
        moduleA,
      }
});
export default store;

3.0版本

1、在modules目錄內創建moduleA.js

const state = {
    indexgoods:[],
}

const mutations = {
    indexgoods (state,arr) {
        state.indexgoods=arr//變更狀態
    }
}

const actions = {
    //異步請求獲取數據後傳給mutations修改狀態
    indexgoods({commit},arr) {
        axios.post("/goods").then(response => {
            if (response.data) {
                console.log(response.data.data.list);
                commit('indexgoods',response.data.data.list)//傳給mutations修改indexgoods
            }
        })
    }
}

const getters = {
    //計算屬性
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

2、導入模塊到index.js內即可

import moduleA from './modules/moduleA'
const store = new Vuex.Store({
    modules: {
        moduleA
    }
});
export default store;

3、組件獲取狀態和觸發事件

$store.state.moduleB.indexcategory//獲取狀態
this.$store.dispatch('moduleB/indexcategory')//觸發action再傳到mutation修改狀態

4.0版本

此代碼摘自element-UI ,通過webpack的方法將目錄內的模塊導入，無需按3.0的方法去手動導入了。

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules
})

5.0版本

官方還有一種方案，官方文檔：https://vuex.vuejs.org/zh/guide/modules.html

└── store
    ├── index.js          # 我們組裝模塊並導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產品模塊