Vuex

核心概念

State

单一状态树(用一个对象就包含了全部的应用层级状态),类似于 vue 中的 data

定义

let store = new Vuex.Store({
    state: {
        count: 0
    }
})

访问

最简单的是在计算属性中返回某个状态,这样每当 store.state 发生变化时,能重新求取计算属性,并触发更新相关联的 DOM。

computed: {
    count () {
        return this.$store.state.count
    }
}

mapState 辅助函数 + 对象展开运算符

利用 mapState 辅助函数生成多个计算属性,利用对象展开运算符将 mapState 返回的对象和局部计算属性混合使用。
若同名,可以给 mapState 传一个字符串数组

import { mapState } from 'vuex'

export default {
    //...
    computed: {
        otherComputed () { // 其他局部计算属性
            ...
        },
        ...mapState({
            countNumber: 'count', // 等于 'countNumber: state => state.count'
        })
    }
}

Getter

可以从 state 中派生出一些状态,类似于 vue 中的计算属性

定义

接受 state 作为第一个参数,可以接受其他 getter 作为第二个参数,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

访问

  • 通过属性访问
  • 通过方法访问,即让 getter 返回一个函数,可以给 getter 传参
// 通过属性访问
this.$store.getters.xxx

// 通过方法访问,getter 需要返回一个函数
this.$store.getters.xxx(xx)

mapGetters 辅助函数 + 对象展开运算符

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}

Mutation

更改 state 的唯一方式,必须是同步函数

参数

Action

类似 Mutation,但 Action 提交的是 mutation,不能直接改变 state,可以包含异步操作。

注册 Action 及参数

  Action 函数接受一个 context 对象,该对象与 store 实例具有相同的方法和属性(但不是 store 实例本身),因此可以通过 context.commit 提交一个 mutation,或通过 context.statecontext.getters 来获取 state 和 getters。
  可以通过 ES6 的参数解构来简化代码。

actions: {
    // context 对象, obj 为载荷(其他参数)
    action1 (context, obj) {
        console.log(context)
        context.commit('xxx')
    },
    
    // 参数解构 context 对象
    action2 ({commit, state, getters}, obj) {
        console.log(commit, state, getters)
    }
}

触发 Action

// 以载荷形式分发
this.$store.dispatch('updateNumber',{
    number: 10
})

// 以对象形式分发
this.$store.dispatch({
    type: 'updateNumber',
    number: 10
})

Module

    原文作者:零子
    原文地址: https://segmentfault.com/a/1190000018499470
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞