Vuex 学习总结

Vuex 学习总结

Vuex 是什么

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

核心概念

首先我们需要知道 vuex 中有 5 个核心概念

State

• 这里存放的对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
• 在 Vue 组件中访问this.$store.state 中的key 去访问。

Getters

• 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。Getter 也可以接受其他 getter 作为第二个参数

Mutation

• 同步方法
• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

const store = new Vuex.Store({
  state: {
    count: 1
  },
 //  我们想要修改 state.count 的值 只能通过 mutations 中定义的方法。
  mutations: {
  // 这里会接受两个参数， 第一个就是我们声明的 state 对象，第二个参数是 store.commit 传入额外的参数
  increment (state, payload) {
    state.count += payload.amount
  }
  }
})

// 这个的第一个参数代表我们在 vuex 中 mutations 中申明的 increment 方法，第二个参数是我们给该方法的值
 this.$store.commit('increment', {
  amount: 10
})

Action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
  
// 你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    ]),

  }
}

Module

• Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

• 命名空间
  – 你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。