什么是this.$store？·简介·什么是this.$store

作者：网络发烧程序猿 | 发布时间：2025-07-04 |

什么是this.$store？

在Vue中，this.$store是一个特殊的属性，它指向Vue实例上的Vuex store实例。Vuex是一个用于管理Vue应用状态的库，让开发者能够集中管理应用的数据状态。

VUEX简介

Vuex是一个专门为Vue.js开发的状态管理模式，它将整个应用的状态存储在一个地方，并以可预测的方式保证状态的变化。

单一状态树：整个应用的状态被存储在一个对象中。
只读状态：不能直接修改store中的状态，只能通过提交mutation来修改。
纯函数：Mutation必须是同步的，不能有异步操作。

THIS.$STORE的作用

在Vue组件中，通过this.$store可以：

访问全局状态：获取和读取store中的状态数据。
提交mutations：改变store中的状态。
派发actions：处理异步操作或复杂的状态变化逻辑。
访问getters：获取经过计算的状态数据。

访问全局状态

在Vue组件中访问全局状态很简单，只需要通过this.$store.state即可。

 // 假设store配置如下： const store = new Vuex.Store({ state: { count: 0 } }); // 在Vue组件中访问count状态 computed: { count() { return this.$store.state.count; } }

提交MUTATIONS

Mutation是更改Vuex状态的唯一方法，通过this.$store.commit来提交mutations。

 // 假设有一个mutation const mutations = { increment(state) { state.count++; } }; // 在Vue组件中提交mutation methods: { increment() { this.$store.commit('increment'); } }

派发ACTIONS

Actions提交的是mutations，可以包含任意异步操作。

 // 假设有一个action const actions = { increment(context) { context.commit('increment'); } }; // 在Vue组件中派发action methods: { increment() { this.$store.dispatch('increment'); } }

访问GETTERS

Getters类似于计算属性，可以从store中的state派生出一些状态。

 // 假设有一个getter const getters = { doubleCount(state) { return state.count * 2; } }; // 在Vue组件中访问getter computed: { doubleCount() { return this.$store.getters.doubleCount; } }

实例说明

假设我们有一个简单的任务管理应用，通过Vuex来管理任务状态。

 // store配置 const store = new Vuex.Store({ state: { tasks: [] }, mutations: { addTask(state, task) { state.tasks.push(task); } }, actions: { addTask({ commit }, task) { commit('addTask', task); } } }); // 组件中使用 methods: { addTask(task) { this.$store.dispatch('addTask', task); } }

总结和建议

通过this.$store，Vue组件能够轻松访问和操作全局状态，确保状态的集中管理和一致性。

保持状态的简单和扁平化。
明确区分mutation和action。
使用getter来简化状态访问。