## 一、概述 ``` import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) ``` 可以用于構造Vuex.Store實例的選項對象，就是構造器選項對象； ## 二、state 類型: Object | Function Vuex store 實例的根 state 對象。 如果你傳入返回一個對象的函數，其返回的對象會被用作根 state。這在你想要重用 state 對象，尤其是對于重用 module 來說非常有用； ## 三、mutations 類型: { [type: string]: Function } 在 store 上注冊 mutation，處理函數總是接受 state 作為第一個參數（如果定義在模塊中，則為模塊的局部狀態），payload 作為第二個參數（可選）。 >[danger] 這里定義的函數，是用來改變數據值的，所有改變值的方法，寫在這里，在調用這些函數的地方，用類似`this.$store.commit("mutations 函數名")`的方式來觸發； ## 四、actions 類型: { [type: string]: Function } 在 store 上注冊 action。處理函數總是接受 context 作為第一個參數，payload 作為第二個參數（可選）。 context 對象包含以下屬性： { state, // 等同于 `store.state`，若在模塊中則為局部狀態 rootState, // 等同于 `store.state`，只存在于模塊中 commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters, // 等同于 `store.getters` rootGetters // 等同于 `store.getters`，只存在于模塊中 } 同時如果有第二個參數 payload 的話也能夠接收，該參數傳遞外部過來的數據，比如每次修改的值的增量等等。 >[danger] 上面mutations 中定義的函數，用以改變狀態值，您可以直接在外部方法中直接通過` this.$store.commit` 來調用，但官方推薦在actions中定義函數，在該函數中，執行commit操作，而在外部用` this.$store.dispatch("actions函數名")` 調用action里面的函數，達到間接執行mutations 中函數的目的； ## 五、getters 類型: { [key: string]: Function } 在 store 上注冊 getter，getter 方法接受以下參數： state, // 如果在模塊中定義則為模塊的局部狀態 getters, // 等同于 store.getters 當定義在一個模塊里時會特別一些 state, // 如果在模塊中定義則為模塊的局部狀態 getters, // 等同于 store.getters rootState // 等同于 store.state rootGetters // 所有 getters 注冊的 getter 暴露為 store.getters。 ## 六、modules 類型: Object 包含了子模塊的對象，會被合并到 store，大概長這樣： { key: { state, namespaced?, mutations, actions?, getters?, modules? }, ... } 與根模塊的選項一樣，每個模塊也包含 state 和 mutations 選項。模塊的狀態使用 key 關聯到 store 的根狀態。模塊的 mutation 和 getter 只會接收 module 的局部狀態作為第一個參數，而不是根狀態，并且模塊 action 的 context.state 同樣指向局部狀態。 定義的時候，類似于： ``` export default new Vuex.Store({ modules: { //模塊的定義引用 app, user, permission }, state: { }, mutations: { }, ... ``` ## 七、plugins 類型: Array<Function> 一個數組，包含應用在 store 上的插件方法。這些插件直接接收 store 作為唯一參數，可以監聽 mutation（用于外部地數據持久化、記錄或調試）或者提交 mutation （用于內部數據，例如 websocket 或 某些觀察者） ## 八、strict 類型: Boolean 默認值: false 使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數以外修改 Vuex state 都會拋出錯誤。 ## 九、devtools 類型：Boolean 為某個特定的 Vuex 實例打開或關閉 devtools。對于傳入 false 的實例來說 Vuex store 不會訂閱到 devtools 插件。可用于一個頁面中有多個 store 的情況。 { devtools: false }