vuex管理数据

代码如下

import Vue from ‘vue’
 import vuex from ‘vuex’
 Vue.use(vuex);
 const state={//仓库
 user:“liu”,
 pass:“yong”
 }
 const mutations={//同步提交
 hello(state,a){//两个回调参数一个state，一个形参
 console.log(“hello world”+a.a+state.pass)
 this.state.user=“liuyu”
 }
 }
 const actions={//分发dispatch
 hel(con){//{commit}
 con.commit(“hello”,{a:10,b:11})
 }
 }
 const getters={//获取属性
 he(state){
 return state.user;
 }
 }
 const ma={//模块
 state
 }
 const modules={//模块
 ma:ma
 }
 export default new vuex.Store({
 state,//仓库
 mutations,唯一改变state数据的方法同步提交commit回调一个state与形参
 actions,//异步分发dispatch
 getters,//仓库缓存方法带一个state仓库形参
 modules//模块
 })
 组件模块内容写在template里面
 {{this.store.state.user}}仓库state属性user
 {{this.store.getters.he}} 缓存属性he
 {{this.store.state.ma.user}} ma是模块
 <button @click=“but”>点击/button>
 export default {
 data(){
 return {
 e:this.store.getters.he//store是组成在app.vue全局变量省略了$自行加上
 }
 },
 methods:{
 but:function(){
 this.store.commit(“hello”,{a:10,b:10}) mutations同步提交commit
 this.store.dispatch(“hel”)//actions异步分发dispatch
 }
 }
 }