1.安装Vuex
npm install vuex --save
2.在src的统计目录下建一个名字为store的文件夹,在store的文件夹中建一个名为index.js的文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({ name: "store", state: { counte: 1 }}) //导出
3.在main.js中引入
在全局引入之后,就能够在全局使用this.$store.state来获取state中的内容了。如
console.log(this.$store.state.counte) //1
import store from "./store/index.js";//引入store
new Vue({ el: "#app",
router,
store, //全局注入
template: "<App/>",
components: { App } });
4.getter监听state的变化
做完上面的步骤,你已经可以用this.$sore.state.counte来获取state里面的数据的值了,但是并不能实时的更新state的数据,Vuex官方提供了一个getters,与computed一样,来监听state相关信息的变化。
import Vue from 'vue';
import Vuex from 'vuex'Vue.use(Vuex);
//导出export default new Vuex.Store(
{name: "store",
state:{heser: '',//初始值
footer: '' },
//负责动态监听state的变化
gettes: { //函数的名字随便起,主要用来承载state的值HeaderState(state) {
return state.heser},
FooterState(state) {return state.footer}}})
5.mutation 用来改变初始值
```import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//导出export default new Vuex.Store({
name: "store",
state: {
heser: '',//初始值
footer: '',
num: 0
}, //负责动态监听state的变化
gettes: { //函数的名字随便起,主要用来承载state的值
HeaderState(state) { return state.heser },
FooterState(state) { return state.footer },
changeNum(state) { return state.num }
},
//负责改变state的初始值
mutations: {
showheader(state) {
state.heser = true;
},
hideheader(state) {
state.heser = false;
},
//payload是参数
changeNumstate(state, payload) {
state.num = state.num + payload
}
},
})
6.action 处理异步请求
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//导出
export default new Vuex.Store({
name: "store",
state: {
heser: '',//初始值
footer: '',
num: 0
},
//负责动态监听state的变化
gettes: {
//函数的名字随便起,主要用来承载state的值
HeaderState(state) {
return state.heser
},
FooterState(state) {
return state.footer
},
changeNum(state) {
return state.num
}
},
//负责改变state的初始值
mutations: {
showheader(state) {
state.heser = true;
},
hideheader(state) {
state.heser = false;
},
//payload是参数
changeNumstate(state, payload) {
state.num = state.num + payload
}
},
//此时,在组件内就可以通过this.$store.state.commit("showheader")获取state仓库的值了
//action进行异步处理
actions: {
showheaders(state){
state.commit('showheader')
},
//函数名可以随便起,但是commit的参数要和mutations的函数名称相同
changeNum(state,num){
state.commit('changeNumstate',num)
},
}
// 此时在组件内部,可以通过this.$stroe.dispatch("showheaders")获取state的值 this.$store.changeNum("changeNum",5)来更改state的值
})