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 应用程序中管理状态的重要工具，通过集中式状态管理解决了复杂应用的组件通信难题，其核心在于 ​单向数据流 和 ​严格的状态变更规则