学习笔记之Vuex的用法总结(Vue状态管理)

什么是Vuex？

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

Vuex的基本概念

在使用Vuex之前，需要了解一些基本概念。

State（状态）

Vuex使用单一状态树，也就是用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

Getter（获取器）

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，可以使用 Getter。

Getter 可以被看作是 store 中的计算属性，Getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Mutation（变更）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

注意：不能异步调用 mutation 函数。

Action（异步变更）

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

Module（模块）

当多人协同开发大型项目时，为了避免各个组件之间命名冲突，可以使用模块功能。

每个模块拥有自己的 state、mutation、getter、action 和 module。可以多重嵌套。

Vuex的使用

安装

通过npm安装Vuex：

npm install vuex --save

导入和使用

在 main.js 中导入并使用 Vuex：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
  }
})

new Vue({
  el: '#app',
  store,
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    },
    evenOrOdd () {
      return this.$store.getters.evenOrOdd
    }
  }
})

在这个例子中：

• 通过 Vuex.Store 创建一个 store。
• state 定义了一个名为 count 的状态和一个初始值 0。
• mutations 定义了一个名为 increment 的 mutation，用于增加 count 的值。
• getters 定义了一个名为 evenOrOdd 的 Getter，用于计算 count 的奇偶性。
• 通过 store 选项将 store 注入到根组件中。
• methods 中的 increment 方法通过 this.$store.commit 方法提交名为 increment 的 mutation。
• computed 中的 count 和 evenOrOdd 计算属性通过 this.$store.state.count 和 this.$store.getters.evenOrOdd 获取 store 中的状态和 Getter。

Getter示例

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Buy milk', done: true },
      { id: 2, text: 'Go to gym', done: false },
      { id: 3, text: 'Hang out with friends', done: false },
      { id: 4, text: 'Learn Vue.js', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    undoneTodos: state => {
      return state.todos.filter(todo => !todo.done)
    }
  }
})

在这个例子中，doneTodos 和 undoneTodos 这两个 Getter 会分别返回做完和没做完的 todos。

Action示例

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

在这个例子中，incrementAsync 这个 Action 会等待 1 秒后再提交 mutation，实现异步增加 count 的功能。

至此，Vuex的基本概念和使用方法已经全部讲述完毕。后续还有更深入的内容，可以查阅官方文档。