【Vuex】Vuex 讲解

Vuex是Vue.js的官方状态管理库，用于在Vue应用中集中管理和共享状态。它提供了一种统一的方式来管理应用的状态，使得不同组件之间可以方便地共享数据、状态和逻辑。

Vuex的核心概念包括：

State（状态）: Vuex中的状态存储在一个单一的数据源中，称为state。State可以被多个组件访问和修改，通过这种集中化的管理，我们可以方便地对应用的状态进行统一的控制和操作。
Getters（计算属性）：Vuex提供了getters用于从state中派生（计算）出新的状态。可以理解为state的计算属性，它们是基于state的值进行某种逻辑处理，缓存计算结果，通过getters来获取派生出的状态。
Mutations（变更）：Mutations是Vuex官方推荐的唯一修改state的方式。通过mutations中的方法来改变state，保证状态的改变是可追踪的。只有通过mutations中定义的方法来修改state，Vue Devtools工具才能监听到状态的变化。
Actions（动作）：Actions用于处理异步操作和批量提交mutations。通过定义actions中的方法，我们可以触发异步操作，通过commit调用mutations的方法来修改state。
Modules（模块）：当应用的状态变得复杂时，可以使用Vuex的模块功能来将状态分割成多个模块。每个模块都有自己的state、mutations、actions和getters，使得应用的状态管理更加灵活、可维护。

下面是一个简单的Vuex示例：

javascript 复制代码

// 在main.js中引入并使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    getterRouter: false
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    changeGetterRouter(state, value) {
      state.getterRouter = value
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

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

在上述示例中，我们创建了一个Vuex的store实例，并将其注入到Vue应用中。store中定义了一个状态state，以及mutations、actions和getters用于修改和获取状态。

这样，我们就可以在组件中使用this.$store.state.count来获取状态，使用this.$store.commit('increment')来提交一个mutation，使用this.$store.dispatch('incrementAsync')来分发一个action。

比如：

javascript 复制代码

const store = new Vuex.Store({
  state: {
    getterRouter: false
  },
  mutations: {
    changeGetterRouter(state, value) {
      state.getterRouter = value
    }
  }
})

在这个示例中，我们创建了一个名为 changeGetterRouter 的 mutation 函数，它接收两个参数：state 和 value。在这个函数内部，我们将传入的 value 值赋给 state.getterRouter，从而改变该状态的值。

你可以在组件中使用以下代码来触发这个 mutation：

javascript 复制代码

this.$store.commit('changeGetterRouter', true)

这样就会将 getterRouter 的值改为 true。

通过Vuex，我们可以方便地管理和共享应用的状态，使得状态的变化和控制变得更加可预测和可维护。