Vuex使用指南：案例、用法和知识点总结

Vuex使用指南：案例、用法和知识点总结

1. Vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. Vuex 核心概念

1. State：单一状态树
2. Getters：从 store 中的 state 中派生出一些状态
3. Mutations：更改 Vuex 的 store 中的状态的唯一方法
4. Actions：提交 mutation 的另一种方式，可以包含任意异步操作
5. Modules：将 store 分割成模块

3. 使用案例

3.1 基本使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// 在组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count) // -> 1

3.2 使用 Getters

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

// 在组件中使用
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodos.length
  }
}

3.3 使用 Actions

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 在组件中使用
this.$store.dispatch('incrementAsync')

3.4 使用 Modules

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 的状态

4. 用法总结

1. 定义 store：创建一个 Vuex.Store 实例，包含 state、mutations、actions、getters 和 modules。
2. 在 Vue 实例中注入 store：将 store 实例注入到 Vue 实例中。
3. 访问 state：通过 this.$store.state 访问状态。
4. 修改 state：通过提交 mutation 来修改状态，如 this.$store.commit('mutationName', payload)。
5. 异步操作：通过 dispatch action 来进行异步操作，如 this.$store.dispatch('actionName', payload)。
6. 获取派生状态：通过 getters 获取派生的状态，如 this.$store.getters.derivedState。

5. 知识点总结

1. 单一状态树：Vuex 使用单一状态树，即用一个对象包含全部的应用层级状态。
2. 响应式：Vuex 的 store 中的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
3. 不能直接改变状态：改变 Vuex 的 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
4. Actions 可以包含异步操作：Action 类似于 mutation，不同在于 Action 提交的是 mutation，而不是直接变更状态，并且可以包含任意异步操作。
5. 模块化：Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。
6. 辅助函数：Vuex 提供了 mapState、mapGetters、mapActions 和 mapMutations 这些辅助函数，方便我们在组件中使用 Vuex。

通过合理使用 Vuex，我们可以更好地管理 Vue 应用中的状态，使得我们的代码更结构化且易于维护。