Vuex知识点总结
1、什么是Vuex?
-
定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式库
-
作用:解决组件间状态共享的问题,避免多层嵌套传参的复杂性
-
核心:集中管理应用的所有组件状态
2、什么时候用Vuex?
-
适用场景:
-
中大型单页应用(SPA)
-
多个组件需要共享状态
-
组件间通信复杂
-
-
不适用场景:
-
简单的小型应用
-
状态管理需求不复杂
-
3、怎么用Vuex?
1)安装vuex依赖
npm install vuex --save
2)导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3)创建store对象
const store = new Vuex.Store({
// state 中存放全局共享的数据
state: {count:0}
})
4)store对象挂载到vue实例中
new Vue({
el: '#app',
render: h=>h(app),
router,
// 创建的共享数据挂载到vue实例
// 所有组件能够直接从store中获取到全局的数据
store
})
4、Vuex的核心概念
1)State(状态仓库)
-
存储全局共享的响应式数据,类似组件中的 data ,所有组件可通过 this.$store.state 访问
// 创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
state: { count: 0 }
})
// 直接访问
this.$store.state.count
// 把State全局域中的数据映射为我当前组件的计算属性
computed: {
...mapState(['count'])
}
2)Mutations(同步修改)
-
唯一允许修改 state 的方式,必须是同步操作,通过 commit 触发,便于追踪状态变更
mutations: {
SET_USER(state, newUser) { state.user = newUser }
}
// 触发:this.$store.commit('SET_USER', data)
3)Actions(异步操作)
-
处理异步逻辑(如 API 请求),通过 dispatch 触发,最终调用 mutations ,支持 Promise 链式调用
actions: { async fetchUser({ commit }, userId) { const res = await axios.get(`/api/users/${userId}`) commit('SET_USER', res.data) } } // 触发:this.$store.dispatch('fetchUser', userId)
4)Getters(计算属性)
-
从 state派生出新状态,类似组件的 computed ,支持缓存和动态计算
getters: { totalPrice: (state) => state.cartItems.reduce((sum, item) => sum + item.price, 0) } // 调用:this.$store.getters.totalPrice
5)Modules(模块化)
-
将大型应用的状态(Store)分割为模块,每个模块独立管理。每个模块拥有自己的 state、mutations、actions、getters
const moduleA = { state: {}, mutations: {}, actions: {}, getters: {} } const store = createStore({ modules: { a: moduleA } })
Vuex 的注意事项
-
状态修改:只能通过 mutations 或 actions 修改状态,不能直接修改 state
-
异步操作:在 actions 中处理异步操作,再提交 mutations
-
模块化:对于大型应用,使用模块化管理状态
总结:Vuex 是 Vue 应用程序中管理状态的重要工具,通过集中式状态管理解决了复杂应用的组件通信难题,其核心在于 单向数据流 和 严格的状态变更规则