正文
VueX-状态管理器
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、VueX功能与解决的问题
1、中央状态管理器的功能：
1.1.可以管理共享状态
1.2.提供一 个可修改状态的方法
1.3.提供状态获取的方法
1.4.状态更改后，有通知机制
2、中央状态管理器解决的问题：
解决多个平行组件（无父子嵌套关系）的间的状态的共享和维护
二、VueX实现
1、通过npm安装并引入:
1.1.npm i Vuex -S(项目级依赖)
1.2.主入口文件引入Vuex并注册（全局）
import Vuex from "Vuex";
app.use(Vuex);
1.3.创建中央仓库文件Vuex.js并引入且注册
import Vuex from "Vuex";
app.use(Vuex);
2、通过Vuex创建中央仓库
Vuex.js:export default new Vuex.store({
state:{
num:0,
},//用来定义共享的状态的数据（厨房原材料）
mutations:{
//无法处理外部的函数，actions传什么处理什么
"dir":(state,arg)=>{
state.num++;
}
},//中央仓库用来修改state共享数据的值；（相当于厨房的大厨）
actions:{
"add":(store,playload)=>{//可在此ajax异步获取（外出购买没有的菜）
/*
var promise=new Promise(
(resolved)=>{
},
(rejected)=>{
},
(noticify)=>{
}
)
*/
//playload负载->事件所带参数
store.commit("dir",playload)//向mutations提交
}//"add" 口令（菜名） 采用发布订阅者模式
},//用来处理外部事件的请求并按照条件进行筛选（饭店点菜员）
getters:{
"getNum":(state)=>{
return state.num;
}
}//用来获取处理好的状态（相当于vue中的计算属性）
});
3、中央状态仓库的调用
3.1.主入口文件先引入中央仓库文件Vuex.js并在vue-model类似路由注册的方式注册
3.2.调用中央仓库的地方通过import {mapGetters,mapActions} from "Vuex";//mapGetters订阅中央仓库getters,mapActions
计算属性
computed:mapGettes(
num:"getNum"
);
methods:update:mapActions({
update:"add",
})
