您的位置:

Vue状态管理——Vuex

一、安装和基础配置

安装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。