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

vuex也被用在了vue的几个项目中。综上所述，使用仓库写法（store.js）很方便1.引入部分importVuefrom'vue'//引入vueimportVuexfrom'vuex'//引入vuexVue.use(Vuex)//vue使用vuex2。存储方法conststate={dyrouter:"",}constmutations={SET_DYNAMIC_ROUTER(state,value){state.dyrouter=value},}constgetters={dyrouter:state=>state.dyrouter,}constactions={//异步写入，返回promise对象setdynamicrouter({commit},data){returnnewPromise(resolve=>{commit('SET_DYNAMIC_ROUTER',data)resolve()})},}exportdefaultnewVuex.Store({state,mutations,getters,actions})截图参考importstorefrom'./store.js'inmain.jsinvueimportstorefrom'./store.js'//看store文件是在哪里引入的newVue({el:'#app',router,store,//在vue组件中注册组件:{App},template:''})Vue使用仓库读写（同步）1.读取（方法一）import{mapState}from'vuex'//引入mapStatecomputed:{...mapState(["dyrouter"]),}，可以直接在视图中绑定“dyrouter”参数（方法2）importstorefrom'@/store'//引入storestore.getters.dyrouter//读取store仓库中的dyrouter参数2.writeimport{mapMutations}from'vuex'methods:{...mapMutations([//引入mapMutations"SET_DYNAMIC_ROUTER"//在vuex中引入函数方法]),this.SET_DYNAMIC_ROUTER("传入参数");//使用这个方法}Vue使用仓库写（异步）importstorefrom'@/store'//引入storestore.dispatch('setdynacrouter',"传入参数").then(()=>{之后执行回调充值完成，去这里获取参数不会为空})以上总结仅供个人常用。更多详情请参考官网