1.依賴
npm install vuex --save
2.src下創建目錄store
store下創建文件index.js
內容為：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
});
export default store
這樣就可以全局使用vuex了
3.使用方式和Vuex.Store中定義的內容有關
State:基礎數據
const store = new Vuex.Store({
state: {
count: 1
}
});
組件中引用
{{this.$store.state.count}}
4.Getters:對數據操作后返回
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
getStateCount: function (state) {
return state.count + 1;
}
}
});
組件中調用
{{this.$store.getters.getStateCount}}
- Mutations：對數據進行操作
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
state.count = state.count + 1;
},
reduce(state) {
state.count = state.count - 1;
}
}
});
組件中調用
//template中
<div>{{this.$store.state.count}}</div>
<el-button @click="handleAdd">+</el-button>
<el-button @click="handleReduce">-</el-button>
//script中
methods: {
handleAdd() {
this.$store.commit("add");
},
handleReduce() {
this.$store.commit("reduce");
}
}
- Actions：對操作進行封裝
并不建議直接調用Mutations，在Actions中封裝Mutations再調用：
actions:{
addFunc(context){
context.commit("add");
},
reduceFunc(context){
context.commit("reduce");
}
}
組件中調用
handleAdd() {
// this.$store.commit("add");
this.$store.dispatch("addFunc");
},
handleReduce() {
// this.$store.commit("reduce");
this.$store.dispatch("reduceFunc");
}
