创建vuex.js
配置要依赖
import vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
exoprt var store default new Vuex.Store{
state:{},//定义属性值
mutations:{},//设置方法函数，注意：mutations不能有异步处理，因为有异步处理程序会很调试，devtooles也会很难追踪到状态
actions:{},//用来处理mutatuions的异步处理
getters:{}//此方法和vue中的computed一样
}
1.state
state与vue中的data类似，都是用来定义属性值。
例：state:{
psd:'123456',
phone:'13927975000',
time:1
}
2.mutations
mutations用来定义方法，可以通过这个来修改state中的属性值,写方法是最好采用大写
例：mutations:{
MODIFY(key){
state.psd = key;
},
TIME(){
state.time++;
}
}
3.actions
actions因为mutations不能处理异步程序，所以用actions处理，actions不能自己定义方法，都是通过调用mutations中的方法,写方法是最好采用大写
例：actions:{
MODIFYTIME({commit}){
setTimeout(function(){
commit('TIME');
},1000);
}
}
4.getters
getters与vue中的computed相似，可以监听每个属性值的变化
例：getters:{
msg(state){
var msg = '';
if(state.psd == ''){
msg = '密码不能空'；
}else{
msg = ’设置成功‘;
}
return msg ;
}
}
在app.vue页面中引用
import store from './vuex.js';
import {mapState,,mapMutations,mapActions,mapGetters} from 'vuex';
new Vue({
el:'#app',
store:store,
data:{},
methods:{
//mutations用法,第一种
modify(){
store.commit('MODIFY');
}
//mutations用法,第二种
...mapMutations[{
modify:'MODIFY'
}],
//actions用法,第一种
modifytime(){
store.commit('MODIFYTIME');
}
//actions用法,第二种
...mapActions[{
modifytime:'MODIFYTIME'
}]
},
computed:{
//获取state中的值,第一种写法
psd(){
return this.$store.state.psd;
}
//获取state中的值,第二种写法
...mapState[{ psd:store => store.state.psd}]
//获取getters中的值,第一种写法
msg(){
return this.$store.state.msg;
}
//获取getter中的值,第二种写法
...mapGetters[{ msg:store=> store.getters.msg}]
}
});