当前位置：首页 > news >正文

Vue状态管理工具：vuex

news 2025/11/30 7:32:12

基本概念

使用步骤

核心概念

1.State

2.Getters

3.Mutations

4.Actions

5.Modules

辅助函数

基本概念

基础用法

基本概念

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

简单来说，Vuex 是实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据。可以把它当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。

使用步骤

1）.安装vuex

npm install vuex --save

2）.引用Vuex，并创建 Store仓库

可以在一个单独的文件（如 store.js）中创建 store，并导出它以便在其他地方使用。

import Vue from 'vue';  
import Vuex from 'vuex';  Vue.use(Vuex);  const store = new Vuex.Store({  state: {  定义状态  },  mutations: {  定义改变状态的方法  },  actions: {  定义执行异步操作的方法  },  getters: {  定义计算属性  }  
});  export default store;

3）.将 Store 挂载到 Vue 实例

import Vue from 'vue';  
import App from './App.vue';  
import store from './store'; // 引入上面创建的 store  new Vue({  el: '#app',  store, // 将 store 挂载到 Vue 实例上  render: h => h(App)  
});

4）. 在组件中使用vuex：通过 this.$store 来访问 Vuex store

created(){console.log(this.$store)
}

核心概念

store 仓库将包含state、mutations、actions以及从 state 中派生出一些状态的计算属性getters。

1.State

state提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。当组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会响应式地更新。

const store = new Vuex.Store({// state 状态数据state: { count: 666 }
})//组件中访问
this.$store.state

2.Getters

getters允许我们对 Store 中的数据进行加工处理形成新的数据。可以被认为是 store 的计算属性。getters和computed一样具有缓存机制。

如：在state.count的基础上派生出一个新的状态newCount出来

const store = new Vuex.Store({state:{count:666  },getters:{newCount:state => state.count * 3// 简化箭头函数(state) => { return state.count * 3 }}
});//组件中获取newCount
this.$store.getters.newCount;

3.Mutations

mutations是唯一更改 store 中状态的方法。mutation必须是同步函数，因为Vuex 的状态跟踪机制依赖于同步的 mutations，当 mutation 异步执行时，Vuex 无法准确地知道何时状态已经更新，这可能导致无法正确地显示状态变化

 const store = new Vuex.Store({state:{count:666},mutations:{increment(state，value){state.count += value;}}});//组件中调用
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", 需要提交的值);

4.Actions

actions可以包含任意异步操作。Action 类似于 mutation，不同在于：由于异步操作不能直接更新状态，所以Action 提交的是 mutation，而不是直接变更状态。

Action 通过 context.commit 提交一个 mutation，或者通过 context.dispatch 触发其他 action

const store = new Vuex.Store({state: {count:666},mutations: {changeCount(state, num) {state.count = num}},actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() => {context.commit('changeCount', num)}, 1000)}}
})//组件中调用
//通过dispatch调用一个名为setAsyncCount 的action
this.$store.dispatch('setAsyncCount', 888)

5.Modules

Modules每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块。如果把所有的状态都放在state中，随着项目的复杂化，Vuex会变得难以维护。为了方便管理，一般会将其按功能分割成不同的模块(Module)。

import Vue from 'vue';  
import Vuex from 'vuex';  
import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块BVue.use(Vuex);  const store = new Vuex.Store({  state: { },  mutations: { },  actions: { },getters: { } ,modules: {moduleA,moduleB}
});  export default store;//子模块moduleA/moduleB
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {state: {text: 'moduleA/moduleB'},getters: {},mutations: {},actions: {}
}//组件调用
this.$store.state.moduleA.text;

辅助函数

基本概念

一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。当一个组件需要获取多个状态时候，将这些状态都声明会有些重复和冗余。为了解决这个问题，辅助函数应运而生。

通过辅助函数把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就变得非常方便。

属性	辅助函数
state	mapState
getter	mapGetters
actions	mapActions
mutations	mapMutations

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

基础用法

以下均为Vuex的辅助函数提供的语法糖的方式

1. mapState: 将state映射到组件的computed计算属性中。组件可通过访问这些计算属性来直接获取state中的状态值。

import { mapState } from 'vuex';  export default {  computed: {  ...mapState(['count']) // 将store中的count状态映射到组件的computed属性中  }  
}

使用mapState后，在组件的模板中，可以直接使用this.count来访问state中的count状态。

2.mapGetters：将getters映射到组件的computed计算属性中。与mapState类似，这样做可以方便地在组件中通过计算属性来访问getters返回的计算值。

import { mapGetters } from 'vuex';  export default {  computed: {  
// 将store中的doneTodos getter映射到组件的computed属性中  ...mapGetters(['doneTodos']) }  
}

3. mapMutations：将mutations映射到组件的methods方法中。这样，组件就可以通过调用这些方法来直接触发mutations，从而修改state中的状态值。

import { mapMutations } from 'vuex';  export default {  methods: {  // 将store中的increment mutation映射到组件的methods中  ...mapMutations(['increment']), addCount() {  // 调用increment方法时，会自动触发store中的increment mutation this.increment();  }  }  
}

4. mapActions：将actions映射到组件的methods方法中。与mutations不同，actions主要用于处理异步操作。通过映射actions，组件可以方便地触发这些异步操作。

import { mapActions } from 'vuex';  export default {  methods: {  // 将store中的incrementAsync action映射到组件的methods中  ...mapActions(['incrementAsync']), addCountAsync() {  // 调用incrementAsync方法时，会自动触发store中的incrementAsync action  this.incrementAsync(); }  }  
}