什么是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来简化状态访问。