说说如何使用Vuex进行状态管理(小结)

更新时间：2020-08-21 21:06:01 作者：startmvc

1为什么需要状态管理一个Vue组件分为数据（model）与视图（view）。当通过methods中的方法更

1 为什么需要状态管理

一个 Vue 组件分为数据（model）与视图（view）。当通过 methods 中的方法更新数据时，视图也会自动更新。

message.vue


<template>
 <div>
 {{message}}
 <button @click="changeMessage">改变内容</button>
 </div>
</template>

<script>
 export default {
 name: "message",
 data() {
 return {
 message: '你好'
 };
 },
 methods: {
 changeMessage() {
 this.message = '我很好'
 }
 }
 }
</script>

效果：

这个示例中的 message 与 changeMessage() 只能在 message.vue 组件中使用。而在实际应用中，常见的就是跨组件共享数据的要求。这时，就可以通过 Vuex 来优雅并高效地管理组件状态啦O(∩_∩)O~

注意：Vuex 有一定的技术门槛，它主要应用于多人协同开发的大型单页面应用。所以，是否使用 Vuex 取决于团队规模与技术储备。

2 安装 Vuex


npm install --save vuex

安装版本：vuex@3.1.0

3 基本用法

3.1 引入 Vuex

在 main.js 中引入 Vuex：


...
//引入 vuex 插件
import Vuex from 'vuex';
...

//加载 vuex 插件
Vue.use(Vuex);

//Vuex 配置
const store = new Vuex.Store({
 state: {
 ...
 },
 mutations: {
 ...
 }
});
...

new Vue({
 el: '#app',
 ...
 //使用 Vuex
 store: store,
 ...
})

Vuex 中的 store 包含应用的数据状态和操作过程。store 中的数据发生变化，使用了这些数据的组件也会立即更新。

3.2 定义数据

数据定义在 Vuex 的 states 属性中。

我们以计数器为例。定义了一个 count 数据并初始化为 0：


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

3.3 读取数据

数据定义好之后，就可以在 vue 组件中通过 $store.state.count 读取出来啦，比如在 index.vue 中可以这样写：


<template>

 <div>
 ...
 {{count}}
 ...
 </div>
</template>

<script>
 export default {
 name: "index.vue",
 computed: {
 count() {
 return this.$store.state.count;
 }
 },
 
 ...
 }
</script>

这里利用计算属性，从 Vuex 的 store 中读取了计数器的当前值。

3.4 修改数据

使用 Vuex 的 mutations 属性，可以修改 state 中定义的数据。我们为计数器定义增长与减少操作：


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

mutations 中的函数，可以有两个入参。第一个入参是 state，第二个入参可以是任意类型。比如这里可以为新增操作，指定增长量，如果不指定，那么增长量就默认为 1。

注意：如果需要传入多个参数，那么我们可以在此传入一个带多个参数的对象。

这里使用了 ES 6 为函数设置默认值的语法。 increment(state, n = 1) 等同于：


increment (state, n){
 n = n || 1;
}

在 *.vue 组件中，可以通过 this.$store.commit 方法来执行 mutations。我们在 index.vue 中，新增三个按钮，用于 “+1” 、“-1” 和 "+3" 操作：


<template>

 <div>
 
 {{count}}
 <button @click="handleIncrement">+1</button>
 <button @click="handleDecrease">-1</button>
 <button @click="handleIncrementMore">+3</button>
 </div>
</template>

<script>
 export default {
 ...
 methods: {
 handleIncrement() {
 this.$store.commit('increment');
 },
 handleDecrease() {
 this.$store.commit('decrease');
 },
 handleIncrementMore() {
 this.$store.commit('increment', 3);
 }
 }
 }
</script>

this.$store.commit 方法的入参，是在 mutations 中定义的函数名。

还可以通过指定 type 的方式提交, type 的值就是 mutations 中定义的函数名：

main.js


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

index.vue


<template>

 <div>
 {{count}}
 ...
 <button @click="handleByParam">+30</button>
 </div>
</template>

<script>
 export default {
 ...
 methods: {
 ...
 handleByParam() {
 this.$store.commit({
 type: 'incrementByParam',
 count: 30
 });
 },
 }
 }
</script>

注意：如果在 mutations 中异步操作了数据，那么组件在 commit 提交之后，将无法立即改变数据。所以，在 mutations 中，建议尽量使用同步方法来操作数据。

效果：