共计 1116 个字符，预计需要花费 3 分钟才能阅读完成。
vue 的几个项目中也使用过 vuex，总结一下，方便使用
仓库写法 (store.js)
1. 引入部分
import Vue from ‘vue’ // 引入 vue
import Vuex from ‘vuex’ // 引入 vuex
Vue.use(Vuex) // vue 使用 vuex
2. 存储写法
const state = {
dyrouter:””,
}
const mutations = {
SET_DYNAMIC_ROUTER(state,value){
state.dyrouter = value
},
}
const getters = {
dyrouter: state => state.dyrouter,
}
const actions = {// 异步写法，返回 promise 对象
setdynamicrouter({commit},data){
return new Promise(resolve => {
commit(‘SET_DYNAMIC_ROUTER’,data)
resolve()
})
},
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
截图参考
vue 中引入
main.js 中写法
import store from ‘./store.js’ // 看 store 的文件在哪里引入
new Vue({
el: ‘#app’,
router,
store, //vue 中注册组件
components: {App},
template: ‘<App/>’
})
vue 使用仓库读取、写入（同步）
1. 读取
（方法一）
import {mapState} from ‘vuex’ // 引入 mapState
computed: {
…mapState([
“dyrouter”
]),
},
直接可以在视图中绑定 ”dyrouter” 参数
（方法二）
import store from ‘@/store’ // 引入 store
store.getters.dyrouter // 读取 store 仓库里的 dyrouter 参数
2. 写入
import {mapMutations} from ‘vuex’
methods: {
…mapMutations([// 引入 mapMutations
“SET_DYNAMIC_ROUTER” // 引入 vuex 里面的函数方法
]),
this.SET_DYNAMIC_ROUTER(“ 传入的参数 ”); // 使用该方法
}
vue 使用仓库写入（异步）
import store from ‘@/store’ // 引入 store
store.dispatch(‘setdynamicrouter’,” 传入的参数 ”).then(()=>{
存入完成后的执行回调，在这里再去取参数就不会为空
})
以上总结仅为个人常用到的，更多详见官网
