zoukankan      html  css  js  c++  java
  • 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",

    })

     

     

  • 相关阅读:
    全国省市区县数据库脚本
    在 PHP 中养成7个面向对象的好习惯
    DIV CSS网页布局常用的方法与技巧[转]
    Div弹出提示效果(原创)
    通过数据库备份还原 TFS 到新服务器(转)
    C#多线程实现方法——Task/Task.Factary
    SEH结构异常处理使用
    Windows/Unix/Linux编译C/C++添加头文件与库的搜索路径
    windows 使用技巧
    linux重要命令
  • 原文地址:https://www.cnblogs.com/witkeydu/p/9050586.html
Copyright © 2011-2022 走看看