页面访问vuex属性的方法

mini云码 发布日期： 2025-11-02 18:19

我比较喜欢使用computed属性来访问vuex的属性，这样的指向比较清晰，也没依赖太多第三方的语法，如下所示，在页面的computed里定义：

  computed: {
    count() {
      return this.$store.state.count; // 访问状态值
    },
    doubleCount() {
      return this.$store.getters.doubleCount; // 访问获取器值
    }
  }

那么在页面里如何调用vuex里定义的方法呢？

调用同步的方法如下：

    increment() {
      this.$store.commit('increment'); 
    },

同步调用是调用store里对应的mutations函数。

假如想异步调用，则这样调用：

    incrementAsync() {
      this.$store.dispatch('incrementAsync'); // 触发动作方法（异步）
    }

异步调用是调用store里对应的actions函数。

比如，下面是一个store的完整例子：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});