项目中使用vuex模块化

1、修改store.js

• 在src文件夹中添加store文件夹
• store.js放入store文件夹中，重命名store.js为index.js
• 在store文件夹中添加modules文件夹，来存储我们的模块js

2、使用vuex-persistedstate状态持久化

npm i vuex-persistedstate
yarn add vuex-persistedstate // yarn 

可以通过storage参数来修改我们存储的位置
modules文件中注册模块

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

import common from './modules/common'

export default new Vuex.Store({
  modules: {
    common, // 公用
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 修改存储的状态
      // paths: ['common'] // 存储的指定的模块的名字（存储某个模块对象）
    })
  ] // 状态持久化
})

3、创建模块

• 在module文件夹下创建 comomon.js
• 在store/index.js中引入common.js,并在modules注册
• 这里做了一个简单的实例，其他的都是一样的实现方式。

// state
const state = {}
// mutations
const mutations = {}
// getters
const getters = {}
// actions
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

4、state

5、Getter

// Getter
const getters = {
   getToken(state){
       return state.token
   }
}

6、mapGetters 辅助函数 获取

// Getter
<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
   // 方式1
   ...mapGetters('common', ['getToken']), //  映射为 `this.$store.getters.common.getToken`
   // 方式2
    getToken () {
       return this.$store.getters.common.getToken
    }
 }
}
</script>

7、Mutation

8、Action