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

 鸿蒙专栏:想学鸿蒙的,冲

C语言专栏:想学C语言的,冲

 VUE专栏:想学VUE的,冲这里

 CSS专栏:想学CSS的,冲这里

Krpano专栏:想学VUE的,冲这里

上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

目录

✨ 前言

Vuex的几个核心概念

Vuex工作原理

✨ 结语


✨ 前言

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

vue保姆级教程----深入了解Vuex的工作原理_第1张图片

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

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是一个值得深入学习和应用的重要框架和思想。

        我们改日再会        

vue保姆级教程----深入了解Vuex的工作原理_第2张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)