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

})

 

 

原文地址:https://www.cnblogs.com/witkeydu/p/9050586.html