Vuex 状态管理入门指南

1. Vuex 简介

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

为什么需要 Vuex?

在复杂的单页应用中,组件之间的状态管理变得困难。Vuex 通过将状态抽离到全局单例模式中来解决这个问题,这样我们就可以在任何组件中获取状态,触发行为,而不必担心数据的一致性问题。

2. Vuex 的核心概念

Vuex 的核心概念包括 State, Getters, Mutations, Actions 和 Modules。

2.1 State

State 是应用的单一状态树。它作为一个"唯一数据源 SSOT"而存在。

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

在 Vue 组件中,我们可以通过 this.$store.state 来访问状态

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

2.2 Getters

Getters 用于从 store 中的 state 中派生出一些状态。

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)
    }
  }
})

2.3 Mutations

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

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

你可以在组件中使用 this.$store.commit('increment') 来调用一个 mutation。

2.4 Actions

Action 类似于 mutation,不同在于:

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

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

2.5 Modules

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
  }
})

3. 在项目中使用 Vuex

安装 Vuex:

npm install vuex --save

创建 store: 

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义状态
  },
  mutations: {
    // 定义mutations
  },
  actions: {
    // 定义actions
  },
  getters: {
    // 定义getters
  }
})

在 main.js 中引入 store: 

import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

4. 总结

Vuex 提供了一种集中式管理 Vue 应用状态的方案,适用于中大型单页应用。通过理解和使用 State, Getters, Mutations, Actions 和 Modules 这几个核心概念,我们可以更好地组织和管理应用的状态。在实际开发中,建议根据项目的复杂度来决定是否使用 Vuex。对于简单的应用,Vue 的 props 和事件可能就足够了。但是当你的应用变得复杂,多个组件需要共享状态时,Vuex 将是一个很好的选择。