[教程]揭秘Vue状态管理：Vuex从入门到精通实战指南

1. Vuex简介1.1 什么是VuexVuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用了集中式存储管理应用的所有状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说，...

1. Vuex简介

1.1 什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用了集中式存储管理应用的所有状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说，Vuex是一个适用于在Vue项目开发时使用的状态管理工具，它解决了在项目中频繁使用组件传参来实现数据同步的问题。

在具有Vuex的Vue项目中，我们只需要把这些值定义在Vuex的状态管理对象中，就可以在整个项目的组件内被使用。

1.2 Vuex安装与使用

在使用vue-cli脚手架工具创建项目的过程中，可以手动选择安装Vuex，也可以在项目创建完成后再独立安装。

安装Vuex

使用NPM安装Vuex命令如下：

npm i vuex --save

使用yarn安装Vuex命令如下：

yarn add vuex

注册Vuex

在一个模块化的打包系统中，您必须显式地通过Vue.use()来注册Vuex。

// /src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载Vuex
Vue.use(Vuex)
// 创建Vuex对象
const store = new Vuex.Store({ state: { // 存放的键值对就是所要管理的状态 name: 'helloVueX' }
})
export default store

将store挂载到当前项目的Vue实例当中去。

// /main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({ store, render: h => h(App)
}).$mount('#app')

2. Vuex核心概念

2.1 State状态

2.1.1 提供数据

State是Vuex的核心，它包含所有组件的状态。

const store = new Vuex.Store({ state: { count: 0 }
})

2.1.2 访问Vuex中的数据

在组件中通过this.$store.state访问Vuex中的数据。

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

2.2 Getter计算属性

Getter对State进行计算，返回计算结果。

const store = new Vuex.Store({ state: { count: 0 }, getters: { doneTodosCount: (state) => { return state.todos.filter(todo => todo.done).length } }
})

在组件中通过this.$store.getters访问Getter。

computed: { doneTodosCount() { return this.$store.getters.doneTodosCount }
}

2.3 Mutation修改状态

Mutation用于修改State中的数据，它必须是同步的。

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

在组件中通过this.$store.commit('mutationName')调用Mutation。

methods: { increment() { this.$store.commit('increment') }
}

2.4 Action异步操作

Action用于提交Mutation，可以包含任意异步操作。

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { increment(context) { context.commit('increment') } }
})

在组件中通过this.$store.dispatch('actionName')调用Action。

methods: { increment() { this.$store.dispatch('increment') }
}

3. Vuex实战案例

以下是一个简单的Vuex实战案例，用于管理一个计数器。

// /src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } }, actions: { increment({ commit }) { commit('increment') }, decrement({ commit }) { commit('decrement') } }
})
export default store
// /src/App.vue
<template> <div id="app"> <h1>Counter: {{ count }}</h1> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default { computed: { ...mapState(['count']) }, methods: { ...mapActions(['increment', 'decrement']) }
}
</script>

通过以上案例，我们可以看到Vuex在Vue状态管理中的强大功能。在实际项目中，我们可以根据需求对Vuex进行扩展和定制，以适应不同的开发场景。