vuex的引入

官方文档可以解决一切问题。

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
}