[TOC] >[success] # store文件夾說明 接下來會講一下 **正常vuex結構** ，以及 **封裝好的vuex結構**。 >[success] ## 正常vuex **創建項目** 初始化路由會在 **src文件夾** 下生成一個 **store.js** 文件。 **store.js** ~~~ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { } }) ~~~ 這種結構 **看似簡單** ，后期項目 **維護麻煩** 。 >[success] ## 封裝vuex **封裝后** 的結構，在 **src目錄** 下創建一個 **store文件夾**  >[success] ### module文件夾 首先講一下為什么會有 **module文件夾** ，因為項目如果有 **好多vuex的狀態** ，如果都寫在 **sore.js** 中，看起來會 **雜亂無章** ，都不知道哪個 **vuex** 的 **狀態** 是哪個 **模塊** 中使用的，所以有了 **module文件夾** ，例如我有一個 **user模塊** 我只需要在 **module文件夾** 中創建一個 **user.js** **user.js** ~~~ const state = { // } const mutations = { // } const actions = { // } export default { state, mutations, actions } ~~~ 使用時只需要在 **store文件夾** 下的 **index.js** 中這樣 **引入** 即可： ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' // state.js文件可以不寫.js結尾，這樣寫也會自動找到state.js文件 import mutations from './mutations' import actions from './actions' import user from './module/user' // 引入模塊文件 Vue.use(Vuex) export default new Vuex.Store({ state, // ES6對象簡寫的形式，state: state 等同與 state mutations, actions, modules: { // 模塊引用 user } }) ~~~ >[success] ### plugin文件夾 **plugin文件夾** 是存放 **Vuex插件** 的文件夾，假如我們這里有個持久化插件 **plugin/saveiInLocal.js** ~~~ /** * 持久化儲存插件：這個函數會在每次store實例初始化時調用。刷新瀏覽器后第一次要做的操作可以定義在這里 * @param store */ export default store => { // 如果本地存儲了state，就把這個stateJSON字符串轉換成對象，替換到當前store實例的state if(localStorage.state) store.replaceState(JSON.parse(localStorage.state)) store.subscribe((mutation, state) => { // 提交commit提交mutation之后執行這里，把state轉換成JSON字符串儲存到localStorage的state中 localStorage.state = JSON.stringify(state) }) } ~~~ >[success] ### actions.js ~~~ const actions = { // } export default actions ~~~ >[success] ### index.js **index.js** 屬于 **根級別的Vuex** 可以用來管理 **根級別** 的 **actions** 、 **state** 、 **mutations** 、 **getters** ，同樣可以管理 **模塊（module）** 中的 **actions** 、 **state** 、 **mutations**、 **getter**。 ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' // state.js文件可以不寫.js結尾，這樣寫也會自動找到state.js文件 import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user' // 引入模塊文件 Vue.use(Vuex) export default new Vuex.Store({ state, // ES6對象簡寫的形式，state: state 等同與 state getters, mutations, actions, modules: { // 模塊引用 user } }) ~~~ <br/> >[success] ### mutations.js ~~~ const mutations = { // } export default mutations ~~~ >[success] ### state.js ~~~ const state = { // 狀態寫這里 } export default state ~~~ >[success] ### getters.js ~~~ const getters = { // } export default getters ~~~