Vue状态管理——Vuex

GNQJW • 2025-04-24 06:40 • 编程

一、安装和基础配置

安装Vuex非常简单，只需在终端中运行如下命令：


npm install vuex --save

在Vue项目中，需要将Vuex引入并通过Vue.use()使用：


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

Vue.use(Vuex)

创建一个全局的状态管理仓库，主要是为了管理数据，也可以在同一个项目中同时使用多个store，在main.js中进行如下配置：


import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello World!'
  }
})

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

上述代码中，state是一个对象，用于存储数据；message是我们要存储的数据的名称。

二、State

state是一个存储数据的容器，通过它存储的数据可以在整个应用中进行全局使用。在Vuex中，我们需要定义这个状态容器，具体代码如下：


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

上述代码定义了一个名为count的状态，其值为0。可以通过$store.state.count来访问它。

我们还可以对它进行修改，但是在Vue中，状态的修改是有限制的，只能通过mutations来修改状态。

三、Mutation

mutation用来修改一个Vuex的状态，需要使用commit函数来触发一个mutation。mutation必须是同步的，否则会导致记录逻辑出现问题。下面是一个基本的mutation代码：


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

store.commit('increment')

上述代码中，increment是一个mutation名称，它的作用是把count的值+1，需要注意的是，它必须是同步的。

四、Getter

我们可以将Getter看作状态的计算属性，它会根据一个或多个状态的值进行计算并返回结果。Getter非常适合用于相对复杂的状态处理，可以让我们在使用状态时更加方便。


const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

console.log(store.getters.doubleCount)

上述代码中，doubleCount是一个Getter的名称，它把count的值乘以2并返回结果。

五、Action

Action允许我们在mutation之前进行异步操作，并且在操作完成后再触发mutation从而更改Vuex的状态。Action是通过在store中方法中触发一个或多个mutation来实现这一过程的。下面是一个Action的实例：


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

store.dispatch('incrementAsync')

上述代码中，incrementAsync是一个Action的名称，它会在1秒之后通过触发一个名为increment的mutation来增加count的值。

六、Module

当应用开始变得非常大时，我们需要更好地管理状态，Module可以帮我们完成这项工作。它允许我们把Vuex的状态分解为多个模块，从而更好地管理各个状态。下面是一个Module的实例：


const counter = {
  namespaced: true,
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    counter
  }
})

store.dispatch('counter/incrementAsync')

上述代码中，counter是一个名为counter的Vuex Module，它定义了count的状态、increment的mutation和incrementAsync的Action。modules容器是Vuex的全局状态容器，可以存储多个Module。

七、结束语

通过对Vue状态管理库Vuex的详细介绍，相信大家对Vuex已有更深入的理解。Vuex可以使我们更加方便地管理状态，提高工作效率。使用Vuex的过程中要注意，一定要遵循Vuex的原则，尤其在修改状态方面一定要使用mutation。

原创文章，作者：GNQJW，如若转载，请注明出处：https://www.506064.com/n/372380.html