获取值(State)

在 Vuex 中,state 是存储在 Vuex store 中的数据对象,可以通过以下几种方式获取 state 中的值:

  1. 在组件中获取 state: 在 Vue 组件内部,你可以使用 this.$store.state 来访问 store 中的状态。例如,如果你想获取名为 count 的状态值,可以这样做:

computed: {
  countValue() {
    return this.$store.state.count;
  }
}

     2.使用 mapState 辅助函数mapState 辅助函数帮助我们创建计算属性,从而直接获取 state 中的值。这样可以避免在每个计算属性中重复 this.$store.state 代码。

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      countValue: state => state.count
    })
  }
};

      3.在非组件的文件中获取 state: 如果你在非组件的文件中(例如,Vue 插件、Node.js 服务器等)需要访问 Vuex store 的状态,可以通过注入 store 实例来实现。

import store from './store';

// 直接访问 state
const count = store.state.count;

设置值(Mutations 和 Actions)

在 Vuex 中,状态的变更是通过提交 mutation(变更)或 dispatch actions(行动)来实现的。

  1. Mutations: Mutation 是 Vuex 中用来直接变更状态的方法。每个 mutation 都有一个字符串的 type 和一个 handler 函数。你不能直接调用 mutation handler 函数,而是通过 store.commit 方法来触发。

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

// 通过 commit 方法触发 mutation
store.commit('increment');

    2.Actions: Action 类似于 mutation,但是它是异步的。Action 提交的是 mutation,而不是直接变更状态。 

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if (state.count % 2 !== 0) {
        commit('increment');
      }
    }
  }
});

// 通过 dispatch 方法触发 action
store.dispatch('incrementIfOdd');

     3.使用 mapMutationsmapActions 辅助函数: 类似于 mapState,Vuex 还提供了 mapMutationsmapActions 辅助函数,帮助你在组件中更容易地调用 mutations 和 actions。 

import { mapMutations, mapActions } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'increment' // 将 `this.$store.commit('increment')` 映射为 `this.increment()`
    ]),
    ...mapActions([
      'incrementIfOdd' // 将 `this.$store.dispatch('incrementIfOdd')` 映射为 `this.incrementIfOdd()`
    ])
  }
};

通过上述方法,你可以在 Vuex 中方便地获取和设置状态值。记住,直接修改 state 是不被允许的,所有的状态变更都必须通过提交 mutation 或 dispatch action 来完成。这样可以确保状态变更的可追踪性和易调试性。 

Logo

前往低代码交流专区

更多推荐