聚沙成塔·每天进步一点点

⭐ 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

---

Vuex 核心内容

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍 Vuex 的核心概念及其原理，并结合实例说明每个概念的使用。

核心概念

Vuex 的核心概念包括以下几个部分：

1. State（状态）
2. Getter（获取器）
3. Mutation（突变）
4. Action（动作）
5. Module（模块）

1. State（状态）

State 是 Vuex 的核心，用于存储应用的共享状态。每个 Vue 组件都可以从 store 中读取 state。由于 Vuex 的状态存储是响应式的，当 state 发生变化时，依赖于该 state 的组件也会自动更新。

示例：

// store/index.js
const store = new Vuex.Store({
  state: {
    count: 0
  }
})

在组件中使用：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

2. Getter（获取器）

Getter 类似于组件的计算属性，用于计算和获取 state。它们可以用于过滤、排序或计算基于 state 的值。

示例：

// store/index.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

在组件中使用：

<template>
  <div>{{ doubleCount }}</div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  }
}
</script>

3. Mutation（突变）

Mutation 是更改 Vuex 的 store 中的状态的唯一方法。它们必须是同步函数，并且每个 mutation 都有一个字符串的事件类型和一个回调函数。

示例：

// store/index.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在组件中使用：

<template>
  <button @click="increment">Increment</button>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

4. Action（动作）

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

示例：

// store/index.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在组件中使用：

<template>
  <button @click="incrementAsync">Increment Async</button>
</template>

<script>
export default {
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

5. Module（模块）

对于大型应用，我们可以将 store 分割成模块（module）。每个模块有自己的 state、getter、mutation 和 action，甚至是嵌套子模块。

示例：

// store/index.js
const moduleA = {
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
}

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

在组件中使用：

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
    <div>{{ doubleCount }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.a.count
    },
    doubleCount() {
      return this.$store.getters['a/doubleCount']
    }
  },
  methods: {
    increment() {
      this.$store.commit('a/increment')
    },
    incrementAsync() {
      this.$store.dispatch('a/incrementAsync')
    }
  }
}
</script>

原理解析

Vuex 是一个专为 Vue.js 应用设计的状态管理库。它利用 Vue 的响应式系统来管理共享状态。当 Vuex store 中的状态改变时，依赖于这些状态的 Vue 组件会自动更新。

• State 响应式： Vuex 使用 Vue 的 data 选项来声明状态，这意味着状态是响应式的。当 state 改变时，依赖这些 state 的组件会自动重新渲染。

• Mutation 原子性： Vuex 要求 mutation 是同步函数，以确保 state 的变更是可预测的和可追踪的。异步操作必须放在 action 中处理。

• 严格模式： 在严格模式下，所有的状态变更必须通过 mutation 来完成。这可以帮助你更容易地跟踪状态的变化，并且避免不必要的复杂性。

通过 Vuex，我们可以将应用的状态集中管理，避免了组件之间的直接状态传递和复杂的组件嵌套，使得应用的状态管理更加清晰和可维护。

---

⭐ 写在最后

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，