一個簡單的點擊跳轉頁面并設置標題的小粟子
vue文件:
//1.綁定jump觸發事件
<template>
<li v-for="item in footArr" @click="jump(item.name,item.title)"></li>
</template>
//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;
