Vuex是什么？它在Vue.js项目中扮演着怎样的角色？

terry 5小时前阅读数 7 #Vue

文章标签 Vue.js

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

Vuex的核心概念有哪些？

Vuex有几个核心概念，包括State（状态）、Getter（获取器）、Mutation（提交）、Action（动作）和Module（模块）。

State就像是一个数据仓库，存储着应用的所有状态数据，例如在一个电商应用中,购物车的商品列表就可以放在State里。

Getter可以理解为State的计算属性，它可以对State中的数据进行加工处理后再返回，比如在电商应用中,通过Getter可以计算出购物车商品的总价格。

Mutation是唯一能修改State的方法，它必须是同步函数，当需要改变State中的数据时，就要提交Mutation，比如用户添加商品到购物车,就通过提交一个特定的Mutation来实现。

Action类似于Mutation，不同的是Action可以包含任意异步操作，例如从服务器获取商品数据后,再提交Mutation来更新State。

Module则是将Vuex的状态管理拆分成多个模块，每个模块都有自己的State、Getter、Mutation和Action，这样在大型项目中可以使代码结构更清晰，比如一个大型的商城应用，可以把用户模块、商品模块、订单模块等分别用Module来管理。

为什么要使用Vuex？

在小型的Vue.js应用中，可能不需要Vuex，组件之间可以通过props和事件来传递数据，但随着应用的复杂度增加，比如多个组件需要共享同一份数据，并且这些数据需要在不同组件中进行修改和使用时,使用Vuex就很有必要了。

举个例子，在一个多页面的新闻应用中，用户的登录状态需要在多个页面（首页、新闻详情页、个人中心页等）中共享和使用，如果不用Vuex，可能需要通过层层传递props或者使用事件总线等方式，这样会使代码变得复杂且难以维护，而使用Vuex，只需要在State中存储用户登录状态，各个组件通过访问State就能获取到该状态,并且通过提交Mutation来修改它。

Vuex的状态变化是可预测的，因为所有对State的修改都必须通过Mutation，这使得我们可以很容易地追踪状态的变化,方便调试和维护。

如何在Vue.js项目中使用Vuex？

需要安装Vuex,可以通过npm或者yarn来安装。

安装完成后，在项目中创建一个store目录，然后在该目录下创建index.js文件，在index.js中，引入Vue和Vuex，然后使用Vue.use(Vuex)来安装Vuex插件，接着创建一个Store实例，配置State、Getter、Mutation、Action等。

```javascript import Vue from 'vue' import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

<p>然后在Vue项目的入口文件（main.js）中引入store，并将其挂载到Vue实例上。</p>
```javascript
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

这样，在Vue组件中就可以通过this.$store来访问store实例，例如在组件中获取State中的count：this.$store.state.count；获取Getter中的doubleCount：this.$store.getters.doubleCount；提交Mutation：this.$store.commit('increment')；分发Action：this.$store.dispatch('incrementAsync')。