vuex常用实战代码（同步+异步）

vue的几个项目中也使用过vuex，总结一下，方便使用仓库写法(store.js)1.引入部分import Vue from ‘vue’ //引入vueimport Vuex from ‘vuex’ //引入vuexVue.use(Vuex) // vue使用vuex2.存储写法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’ //引入mapStatecomputed: { …mapState([ “dyrouter” ]), },直接可以在视图中绑定"dyrouter"参数（方法二）import store from ‘@/store’ //引入storestore.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’ //引入storestore.dispatch(‘setdynamicrouter’,“传入的参数”).then(()=>{ 存入完成后的执行回调，在这里再去取参数就不会为空 })以上总结仅为个人常用到的，更多详见官网