Vue: 关于store的应用与方法

1. 建立项目基础公共状态

[src/store/common/common.js]

export default {
  namespaced: true, // 命名空间

  state: { // 数据存放
    clientId: 'c1', // 客户端ID
    clientSecret: 'vY9W55NuXM9hoDlx', // 客户端对称秘钥
    username: sessionStorage.getItem('username'), // 用户名
    userId: sessionStorage.getItem('userId'), // 用户ID
    accessToken: sessionStorage.getItem('accessToken'), // 访问Token
    refreshToken: sessionStorage.getItem('refreshToken') // 刷新Token
  },
  getters: { // 过滤器
  },
  mutations: { // 用于事件触发
    setState (state, payload) {
      state[payload.name] = payload.val
    }
  },
  actions: { // 用于触发事件, 执行异步操作触发mutations, 去更新state
  }
}

2. 把[Vuex模块]: common模块 --> 引入到根store的[Vuex]里

[src/store/index.js]

import Vue from 'vue'
import Vuex from 'vuex'
// 引入Vuex模块
import common from '@/store/common/common' // 引入
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    common //接取
  }
})

3. 从[Vuex模块]中取到自己需要的数据, 放在组件里

<template>
  <div class="vuexTest">
    vuex 模块化
    <button @click="getSetStateFun">改变数值</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'VuexTest', // 组件名称
  methods: {
    ...mapMutations('common', {
      getSetState: 'setState'
    }),
    getSetStateFun () {
      this.getSetState({
        name: 'clientId',
        val: 123 // 此时的 clientId, 已经变成123
      })
      console.log(this.$store.state.common.clientId)
    }
  }
}
</script>