[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 ~~~