vue保姆级教程----深入了解Vuex的工作原理

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢 VUE专栏：想学VUE的，冲这里

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

✨ 前言

Vuex的几个核心概念

Vuex工作原理

✨ 结语

---

✨ 前言

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

        下面我们来对它的核心概念与工作原理进行详细分解：

Vuex的几个核心概念

• State:储存应用状态的数据源,是一个树形结构,只有通过mutation函数才能改变其状态。
• Getters: 对State的计算属性,类似Vue中的computed。
• Mutations: 改变State的唯一途径, mutation必须是同步函数。
• Actions: 用于提交Mutation来改变State,可以包含异步操作。
• Modules: 将State、Getters、Mutations和Actions分割到不同的module中以保持项目的结构化。

State

        State是Vuex中的状态中心,存储着所有组件状态的数据。它是一个树形结构,只能通过mutation改变状态。

        State提供了一个应用的“单一数据源”,所有共享状态都定义在这里, components只需要引入使用不需要担心状态不同步的问题。

// store.js

export default new Vuex.Store({
  state: {
    count: 0
  }  
})

// Component.vue

import { mapState } from 'vuex'

export default {
  computed: mapState({
    count: state => state.count
  })
}

Getters

        Getters相当于store的计算属性,对State进行加工处理形成易于使用的新数据。

        Getters接收state作为第一个参数,供其内部消费和处理,通过返回值暴露给外部。可以用来简化数据处理和实现缓存。

// store.js

export default new Vuex.Store({
  getters: {
    doubleCount: state => state.count * 2 
  }
})

// Component.vue

import { mapGetters } from 'vuex'

export default {
  computed: mapGetters([
    'doubleCount' 
  ])
}

Mutations

        Mutations是改变State的唯一途径。

        它接受state作为第一个参数,payload作为第二个参数。可以包含多个mutation函数,通过type区分不同的mutation。

        必须是同步函数,通过提交mutation而非直接改变state来保证状态改变可追踪和调试。

// store.js

export default new Vuex.Store({
  mutations: {
    increment (state) {
      state.count++
    }
  }  
})

// Component.vue 

methods: {
  increment() {
    this.$store.commit('increment') 
  }
}

 Actions

        Actions用于处理业务逻辑,支持异步操作。

        通过context.commit提交mutation来触发状态改变,而非直接改变state。

        可以包含异步操作如 AJAX请求,可以用async/await简化异步流程。

// store.js

export default new Vuex.Store({
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000) 
    }
  }
})

// Component.vue

methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync')
  }
}

Modules

        Modules用于将状态、getters、actions、mutations分割到不同模块中。

        每个模块都有自己的state、getters、actions、mutations,不同模块的状态独立维护。

        有助于项目结构化,减少命名冲突。

// store.js

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

        这样Vuex的每个部分如何协同工作会更加明确,希望对你进一步理解Vuex有帮助!可以根据这个框架来深入去实践和应用Vuex。

Vuex工作原理

1. Vue组件通过dispatch方法触发Actions。

   // Component.vue
   methods: {
     increment() {
       this.$store.dispatch('increment') 
     }
   }

2. Actions 通过commit方法提交Mutations。

   // store.js
   actions: {
     increment({ commit }) {
       commit('INCREMENT')
     }
   }

3. Mutations改变State中的数据。

   mutations: {
     INCREMENT(state) {
       state.count++
     }  
   }

4. State数据的变化将触发所有依赖于它的组件的重新渲染。

   // Component.vue
   computed: {
     count() {
       return this.$store.state.count
     }
   }

5. 可选步骤:组件可以通过getters从Store中获取特定的数据。

   // Component.vue 
   import { mapGetters } from 'vuex'
   
   computed: {
     ...mapGetters(['doubleCount'])
   }

为何要分离 Mutation 和 Action

• Action 可以包含异步操作,Mutation 只能是同步。
• 将状态改变隔离到 Mutation 中,便于追踪和调试。
• 分离业务逻辑 (Action)与状态变更 (Mutation) 使代码结构更清晰。

为何 Mutation 必须是同步

• 直接在 Action 中改状态,不能明确追踪状态变化。
• 很难追踪多个组件共享的状态变更。
• 调试工具无法捕捉每个状态变更,失败记录前后快照。
• 如果是异步操作,后续的改变可能基于之前的过时状态。

所以 Vuex 通过这种设计保证可追踪和可预测的状态管理,也使代码更结构化。这就是它的核心工作原理。

✨ 结语

        Vuex通过集中化的状态管理,将组件的共享状态抽离出来,以一个全局单例模式管理。这使得状态变化可预测,避免了复杂的组件间通信,也使调试和维护变得简单。

        其核心概念State、Getters、Mutations和Actions各司其职,但又相互配合,共同定义了一个清晰流程来改变和处理状态。这种模式提高了代码的结构化,也给予开发者更强的控制力。

        深入理解Vuex的设计思想,可以让我们更好地运用它管理复杂应用的状态,构建健壮可维护的Vue应用程序。Vuex是一个值得深入学习和应用的重要框架和思想。

        我们改日再会