Vuex在更改后在方法内获得新值

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

基础概念

Vuex 的核心概念包括：

State：单一状态树，存储所有组件的共享状态。
Getter：从 store 中获取状态的方法。
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Action：类似于 mutation，不同在于 Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
Module：将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter。

类型

模块化：Vuex 允许我们将 store 分割成模块，每个模块管理一部分状态。
命名空间：模块可以启用命名空间，以避免不同模块间的命名冲突。

应用场景

Vuex 适用于大型单页应用（SPA），特别是当多个组件需要共享状态时。例如，一个电商网站可能会有购物车状态，用户登录状态等，这些状态的管理就可以交给 Vuex。

问题解决

如果你在方法内更改 Vuex 状态后无法获取新值，可能是以下几个原因：

异步问题：如果你在 action 中进行了异步操作，那么你需要在 action 中提交 mutation 来更改状态，然后在组件中通过 this.$store.dispatch('actionName') 来触发 action。
响应性问题：确保你的组件正确地使用了 Vuex 的 mapState, mapGetters, mapActions 或 mapMutations 辅助函数，或者通过 this.$store.state 和 this.$store.getters 直接访问。
Mutation 未提交：确保你更改状态是通过提交 mutation 实现的，而不是直接修改 state。

示例代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['increment', 'incrementAsync'])
}
};
</script>

在上面的代码中，我们定义了一个简单的 Vuex store，其中包含一个 count 状态和一个 increment mutation。在组件中，我们使用 mapState 来获取状态，使用 mapActions 来触发 action。

如果你遵循了上述步骤，但仍然遇到问题，可能需要检查你的 Vue 和 Vuex 版本是否兼容，或者是否有其他代码干扰了状态的更新。

更多关于 Vuex 的信息，可以参考官方文档：https://vuex.vuejs.org/