Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式勇边。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化横腿。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension (opens new window)颓屑,提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能耿焊。
安裝:
npm/cnpm install vuex --save
在store文件夾下的配置:
index.js
import Vue from 'vue'
import { Store, install } from 'vuex'
import demo from './demo'
if(!window.Vuex){
install(Vue);
}
export default new Vuex({
modules:{
demo
}
})
demo.js
export default {
namespaced:true,
state:{
data1:false,
data2:0
},
mutations:{
setData1(state,payload){
state.data1=payload;
}
setData2(state,payload){
state.data3++;
}
},
actions(){
test(ctx){
ctx.commit("setData1",true);
ctx.commit("setData2")
}
}
}
app.vue:
import { mapState } from 'vuex';
created(){
tihs.$store.dispacth("demo/test");
},
computed:{
...mapState("demo",["data1","data2"]),
}