浅了解vuex

73 阅读2分钟

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

状态自管理应用包含以下几个部分:

  • 状态,驱动应用的数据源;
  • 视图,以声明方式将状态映射到视图;
  • 操作,响应在视图上的用户输入导致的状态变化。

安装vuex:yarn add vuex@next --save
安装Vuex 之后,应创建一个 store。提供一个初始 state 对象和一些 mutation

    import { createStore } from 'vuex'
    import number from './state/num.state.js'
    import uInfo from './state/userinfo.js'
    export default createStore({

         //数据比较多,分模块
         modules: {
           number,
           uInfo
         }
    })

核心概念

State 单一状态数

单一状态数让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照

Getters

对state里面的状态进行过滤处理,用法与组件自身的计算属性一模一样

Mutation

每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler) 。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。要唤醒一个 mutation 处理函数,你需要以相应的 type 调用 store.commit 方法

Action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters

Module

为了解决当应用变得非常复杂时,store 对象就有可能变得相当臃肿,Vuex 允许我们将 store 分割成模块(module) 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

小实例

 state: {
      count:1,
    },
    //计算state,获取对应的值 
    getters: {
      countStatus(state){
        return state.count>=1
      }
    },
    //更新状态的方法-更新state的唯一方法,commit mutations
    mutations: {
      setCount(state,num){
        state.count=num
      }
    },
    //可以异步操作,可以返回promise,更改数据还是传递到mutations去更改
    actions: {
      setCountPromise(context,num){
        return new Promise((resolve,reject)=>{
          if(num>100){
            reject("值不能大于100")
          }else{
            context.commit('setCount',num)
            resolve()
          }
        })
      }
    },
    //数据比较多,分模块
    modules: {
    }