創建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}]
}
});