Vuex 是 Vue.js 的官方状态管理工具，用于在组件之间共享状态。它采用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在大型应用程序中，这种状态管理模式可以更好地组织和维护应用程序的状态。
基本使用方法
Vuex 的核心概念包括：state、getter、mutation 和 action。下面我们将逐一介绍这些概念的使用方法。
state
state 是存储应用程序状态的对象。它的值可以是任何 JavaScript 对象。我们可以通过 store 对象来访问 state，如下所示：
const store = new Vuex.Store({
state: {
count: 0
}
})在组件中访问 state 的方式如下：
computed: {
count () {
return this.$store.state.count
}
}getter
getter 用于访问和计算 store 的属性。它类似于组件中的计算属性，但是可以在 store 中定义和使用。getter 接受 state 作为其第一个参数，可以接受其他 getter 作为第二个参数，可以通过属性访问方式来调用 getter，如下所示：
// javascriptcn.com 代码示例
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'todo 1', done: true },
{ id: 2, text: 'todo 2', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
})在组件中访问 getter 的方式如下：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}mutation
mutation 用于更改 store 中的状态。它必须是同步函数，接受 state 作为第一个参数，接受一个 payload 作为第二个参数，用于传递数据。mutation 必须通过 store.commit 方法来调用，如下所示：
// javascriptcn.com 代码示例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
})在组件中调用 mutation 的方式如下：
methods: {
increment () {
this.$store.commit('increment', {
amount: 2
})
}
}action
action 用于异步更改 store 中的状态。它可以包含任何异步操作，接受一个 context 对象作为其第一个参数，包含 state、getter、commit、dispatch 等方法。action 通过 store.dispatch 方法来调用，如下所示：
// javascriptcn.com 代码示例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, payload) {
state.count += payload.amount
}
},
actions: {
incrementAsync ({ commit }, payload) {
setTimeout(() => {
commit('increment', payload)
}, 1000)
}
}
})在组件中调用 action 的方式如下：
methods: {
incrementAsync () {
this.$store.dispatch('incrementAsync', {
amount: 2
})
}
}常见问题解决
如何在开发和生产环境中使用不同的 state
在开发环境中，我们可能需要使用一些假数据来模拟真实数据，而在生产环境中则需要使用真实数据。为了解决这个问题，我们可以在 store 中使用环境变量来判断当前环境，如下所示：
const store = new Vuex.Store({
state: {
todos: process.env.NODE_ENV === 'production' ? [] : [
{ id: 1, text: 'todo 1', done: true },
{ id: 2, text: 'todo 2', done: false }
]
}
})如何在 mutation 中使用异步操作
mutation 必须是同步函数，但是有时我们需要在 mutation 中执行异步操作，比如从服务器获取数据。为了解决这个问题，我们可以使用 action 来处理异步操作，然后在 action 中调用 mutation 来更改状态，如下所示：
// javascriptcn.com 代码示例
const store = new Vuex.Store({
state: {
todos: []
},
mutations: {
setTodos (state, todos) {
state.todos = todos
}
},
actions: {
async fetchTodos ({ commit }) {
const todos = await fetch('https://api.example.com/todos')
commit('setTodos', todos)
}
}
})在组件中调用 action 的方式如下：
methods: {
fetchTodos () {
this.$store.dispatch('fetchTodos')
}
}如何在组件中监听 store 的状态变化
在组件中可以使用 $watch 方法来监听 store 的状态变化，如下所示：
// javascriptcn.com 代码示例
computed: {
count () {
return this.$store.state.count
}
},
watch: {
count (newCount, oldCount) {
console.log(`count changed from ${oldCount} to ${newCount}`)
}
}总结
通过本文，我们学习了 Vuex 的基本使用方法和常见问题解决方法。Vuex 是一个非常强大和实用的状态管理工具，可以帮助我们更好地组织和维护应用程序的状态。在实际开发中，我们可以根据需要灵活使用 Vuex，以提高应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a3e8e95b1f8cacd498364