官方文档可以解决一切问题。
1、安装vuex
npm install [email protected] --save
如果版本和你的vue版本不符合,可以根据提示,在@后加上适合的版本号再安装。
安装成功之后会在packjson中表明vuex的版本号
2、新建一个store文件夹,和main.js同级
目录结构如下
index.js是需要配置引入vuex的文件,getters.js是一些vuex中的快捷引用
modules是vuex中的模块,其下的js文件是vuex的存储
3、配置index.js
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 import getters from './getters' 4 5 Vue.use(Vuex) 6 7 // 读取modules文件夹 8 const modulesFiles = require.context('./modules', true, //.js$/) 9 10 // 递归获取文件夹下的所有文件 11 const modules = modulesFiles.keys().reduce((modules, modulePath) => { 12 // set './app.js' => 'app' 13 const moduleName = modulePath.replace(/^/.//(.*)/./w+$/, '$1') 14 const value = modulesFiles(modulePath) 15 modules[moduleName] = value.default 16 return modules 17 }, {}) 18 19 const store = new Vuex.Store({ 20 modules, 21 getters 22 }) 23 24 export default store
4、配置main.js
import store from './store' // 引入vuex的store new Vue({ store }).$mount('#app') // 在vue中挂载
5、getters的写法
const getters = { sidebar: state => state.app.sidebar // 名称: 箭头函数(state/所需模块) => 引用的对象 } export default getters
6、modules下的js写法
const state= {} const getters= {} const mutations= {} const actions = {} export default { namespaced: true, state, getters, mutations, actions }
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/281597.html