一、介绍
Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、安装
- cnpm install vuex -S
三、使用
-
流程图
1632576905(1).png 使用demo
1）新建文件 stroe.js
分四步
a、导入相关的模块
b、使用vuex
c、创建store
d、导出store
//导入相关的模块
import Vue from "vue"
import Vuex from "vuex"
//使用vuex
Vue.use(Vuex);
//创建store
const store=new Vuex.Store({
state:{
count:100
},
mutations:{
increment(state){
state.count++;
},
reducecount(state)
{
state.count--;
}
},
getters:{
count(state){
return state.count;
}
} ,
actions:{
increment({commit}){
commit("increment")
},
reducecount({commit}){
commit("reducecount")
}
}
});
//导出store
export default store
- store中的核心概念
- state
- getters
- mutations
- actions
- App.vue 中的使用
注意事项 在使用mapGetters时
首先得导入
import {mapGetters} from 'vuex'
在使用mapGetters 时记得前面有'...' 否则这就是个computed 中的普通方法
computed:{
//方式一
// count:function(){
// return this.$store.getters.count;
// },
//方式二
...mapGetters(['count'])
}
