vuex

文件目录结构
store 
  ├── index.js   # 我们组装模块并导出 store 的地方
  └── modules
         ├── abc.js  #我们要写的vuex模块

// index.js

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

import abc from './modules/abc'// 随便写vuex模块

Vue.use(Vuex)

export default new Vuex.Store({
// 导入模块
  modules: {
    abc
  },
  plugins: [
    createPersistedState({
      key: 'key',
      paths: ['abc'] // 把要保存的模块，保存到本地储存
    })
  ]
})

/*vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。
怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate
*/

npm install --save vuex-persistedstate

abc.js

const state = {
  num: 0
}

const mutations = {
  handleNum (state, payload) {
    state.num = payload
  }
}

const actions = {
  handleNum ({ commit }, data) {
    commit('handleNum', data)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

namespaced: true

# 命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的
——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。
当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

组件里面调用

引入vuex辅助函数
import { mapState, mapActions } from 'vuex'

export default {
  created: function () {
    console.log(this.num)  // console.log()  >>> 0
    // 调用映射的方法
    this.handleNum(10)
    console.log(this.num) // console.log()  >>> 10
  },

computed: {
    ...mapState({
    获取到abc模块里面的state.num	
      num: state => state.abc.num
    })
  },

  methods: {
	映射actions的方法
	
	namespaced: true  在映射要添加上模块的name  'abc'
				   ∨∨∨
    ...mapActions('abc', [
      'handleNum' // 映射为 `this.$store.dispatch('handleNum', data)`
    	]
	}
}