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

Vuex：Vue.js 的状态管理库

news 2025/8/15 20:13:58

一、Vuex 简介

Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的出现解决了组件间共享状态的问题，使得状态管理变得简单、可预测和可维护。

二、Vuex 核心概念

1. State

State 是 Vuex 管理的应用状态对象。Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。每个应用将仅仅包含一个 store 实例。

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

2. Getters

Getters 是基于 state 的计算属性，用于从 state 中派生出一些状态。

// store.js 
const store = new Vuex.Store({ // ... getters: { doubleCount: state => state.count * 2 } 
});

在组件中使用：

<template> <div>Double Count: {{ doubleCount }}</div> 
</template> 
<script> 
export default { computed: { doubleCount() { return this.$store.getters.doubleCount; } } 
}; 
</script>

3. Mutations

Mutations 是更改 Vuex 中 state 的唯一方法，必须是同步函数。每个 mutation 都有一个字符串的事件类型和一个回调函数，该回调函数就是实际进行状态更改的地方。

// store.js 
const store = new Vuex.Store({ // ... mutations: { increment(state) { state.count++; } } 
});

4. Actions

Actions 类似于 mutations，但它是可以包含任意异步操作的方法。Actions 提交的是 mutations，而不是直接变更 state。

// store.js 
const store = new Vuex.Store({ // ... actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } } 
});

在组件中触发action：

<template> <button @click="incrementAsync">Increment Async</button> 
</template> <script> 
export default { methods: { incrementAsync() { this.$store.dispatch('incrementAsync'); } } 
}; 
</script>

5. Modules

Modules 允许将单一的 Store 分割成多个模块（module）。每个模块拥有自己的 state、mutations、actions、getters 和嵌套子模块。

三、封装 Vuex 为公共组件

为了在多页面之间方便地引用、修改和显示 Vuex 状态，我们可以将 Vuex 的相关逻辑封装为公共组件。

1. 创建 Vuex Store

// store.js 
import Vue from 'vue'; 
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } 
});

2. 创建公共组件

CountDisplay.vue

<template> <div>Count: {{ count }}</div> 
</template> <script> 
export default { computed: { count() { return this.$store.state.count; } } 
}; 
</script>

CountControls.vue

<template> <div> <button @click="increment">Increment</button> </div> 
</template> <script> 
export default { methods: { increment() { this.$store.commit('increment'); } } 
}; 
</script>

3. 在多页面中使用公共组件

在你的 Vue 应用中，你只需要在需要使用这些组件的页面或组件中引入它们即可。

<template> <div> <CountDisplay /> <CountControls /> </div> 
</template> <script> 
import CountDisplay from './CountDisplay.vue'; 
import CountControls from './CountControls.vue'; export default { components: { CountDisplay, CountControls } 
}; 
</script>