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(Vuesx);

1.3.创建中央仓库文件Vuex.js并引入且注册

import Vuex from "Vuex";

app.use(Vuesx);

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",

})

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有