Vue - Vue2使用Vuex进行状态管理
在 Vue 2 中使用 Vuex 主要分为以下步骤:
1. 安装 Vuex
npm install vuex@3 --save # Vue 2 对应 Vuex 3
# 或
yarn add vuex@3
2. 创建 Vuex Store
在项目中创建 src/store/index.js
文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 核心配置
state: { // 状态数据
count: 0,
user: null
},
mutations: { // 同步修改状态
INCREMENT(state) {
state.count++
},
SET_USER(state, user) {
state.user = user
}
},
actions: { // 异步操作
login({ commit }, credentials) {
return api.login(credentials).then(user => {
commit('SET_USER', user)
})
}
},
getters: { // 计算属性
doubleCount: state => state.count * 2
},
modules: { // 模块化(可选)
// cart: cartModule
}
})
3. 注入 Vue 实例
在 main.js
中挂载 store:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store, // 注入所有组件
render: h => h(App)
}).$mount('#app')
4. 在组件中使用
访问状态 (State)
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<p>User: {{ $store.state.user?.name }}</p>
</div>
</template>
使用 Getter
<template>
<p>Double: {{ $store.getters.doubleCount }}</p>
</template>
提交 Mutation (同步)
<script>
export default {
methods: {
increment() {
this.$store.commit('INCREMENT')
}
}
}
</script>
分发 Action (异步)
<script>
export default {
methods: {
login() {
this.$store.dispatch('login', {
username: 'test',
password: '123456'
})
}
}
}
</script>
5. 使用辅助函数 (简化代码)
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
computed: {
// 展开运算符混入
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapMutations(['INCREMENT']),
...mapActions(['login']),
// 使用:
handleClick() {
this.INCREMENT() // 直接调用
}
}
}
</script>
6. 模块化 (大型项目)
// store/modules/user.js
export default {
namespaced: true, // 启用命名空间
state: () => ({ profile: null }),
mutations: { /* ... */ },
actions: { /* ... */ }
}
// store/index.js
import user from './modules/user'
export default new Vuex.Store({
modules: {
user
}
})
组件中使用带命名空间的模块:
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions('user', ['fetchProfile']),
// 直接调用
getUser() {
this.fetchProfile()
}
}
}
</script>
最佳实践建议:
- 修改状态只通过 mutations
- 异步操作使用 actions
- 复杂逻辑使用 getters 封装
- 大型项目务必使用模块化
- 使用常量命名 mutations/actions
// mutation-types.js export const SET_USER = 'SET_USER'
调试工具
启用 Vue Devtools 查看 Vuex 状态变化和时间旅行调试功能
注意:Vue 2 请始终使用 Vuex 3.x 版本,Vuex 4.x 是为 Vue 3 设计的