Vuex 详细解释使用

Paste_Image.png

一个简单的点击跳转页面并设置标题的小粟子

vue文件:
//1.绑定jump触发事件

//2.从actions和getters JS文件分别引入{changePage}和{getTitleName} （dispatch）
import {changePage} from "../js/vuex/actions";
import {getTitleName} from "../js/vuex/getters";

//3.jump触发changePage
methods:{
jump:function(name,title){
this.changePage(name,title);
}
}
}

//4.vuex调用actions方法绑定changePage到{changePage}，调用getters方法绑定getTitleName到{getTitleName}
export default {
vuex:{
actions:{
changePage:changePage
},
getters:{
getTitleName:getTitleName
}
}
}

actions.js
//5.{changePage}绑定dispatch再调用'INCREMENT'方法
export const changePage=({dispatch},pageName,pageTitle)=>{
dispatch('INCREMENT',pageName,pageTitle);
};

store.js
//引入并调用vuex
var Vue=require("vue");
var Vuex=require("vuex");
Vue.use(Vuex);
//设置state对象（用于状态保存）
var state={
pageName:"app",
title:"首页"
};
//6.设置mutations 的INCREMENT方法（用于更改状态）
var mutations = {
INCREMENT(state,pageName,pageTitle){
state.pageName=pageName;
state.title=pageTitle;
}
};
//抛出状态模块
export default new Vuex.Store({
state,
mutations
})

getters.js
//7.最后利用 actions -> changePage->'INCREMENT'->state.title=pageTitle这个过程，得到当前状态的state.title
export default (state) =>state.pageName;
export const getTitleName = (state) =>state.title;