Vuex

Vuex 是 Vue.js 的状态管理模式与库，它专门用于管理 Vue.js 应用中的应用状态。Vuex 提供了一种集中式的存储管理方案，使得在大型应用中管理状态变得更加容易。

Vuex 核心概念

State（状态）：

应用的状态存储位置，即存储数据的地方。Vuex 的状态类似于组件的 data 对象，但是它是全局的，在应用的任何组件中都可以访问。

Mutations（突变）：

用于修改状态的函数。Mutations 接收一个参数，即当前的状态（state），并且可以修改该状态。但是它们必须是同步函数。

Actions（动作）：

类似于 Mutations，但是可以包含任意异步操作。Actions 用于处理业务逻辑、异步请求等操作，然后提交 Mutations 来修改状态。

Getters（获取器）：

用于从状态中派生出新的状态。Getters 可以将状态进行一些计算或者筛选，并返回一个新的状态。

Modules（模块）：

允许将 Vuex 的状态树分割成多个模块。每个模块拥有自己的 state、mutations、actions、getters 等。

通过集中式的状态管理，Vuex 使得应用的状态变得可预测且易于调试。它适用于大型单页应用中需要共享状态的场景，能够帮助开发者更好地组织和管理应用的数据流。

Vuex 实战

当你需要在 Vuex 中管理一个计数器的状态时，可以通过以下示例来说明：

1、安装 Vuex：

首先，确保你的项目已经安装了 Vuex。如果没有安装，可以通过 npm 或者 yarn 进行安装：

npm install vuex

yarn add vuex

2、创建 Vuex Store：

创建一个 Vuex 的 store 来管理应用的状态。在项目的任意地方创建一个 store.js 文件：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0 // 计数器初始值为 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
    decrementAsync({ commit }) {
      setTimeout(() => {
        commit('decrement')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

3、在应用中使用 Vuex：

在应用的入口文件（通常是 main.js）中将 Vuex 的 store 注入到 Vue 实例中：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

4、在组件中使用状态：

在你的组件中可以通过 $store 来访问 Vuex 的状态，同时通过 mutations、actions、getters 来修改和获取状态：

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
    <button @click="decrementAsync">Decrement Async</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    },
    decrementAsync() {
      this.$store.dispatch('decrementAsync')
    }
  }
}
</script>

在这个示例中，我们创建了一个简单的 Vuex Store，其中包含一个计数器状态 count，以及对应的 mutations、actions 和 getters。然后在组件中使用 $store 来访问状态，并通过 mutations 和 actions 来修改状态。