Vuex的使用

👁 2020-10-20

如何使用Vuex

接下来就通过一个简单的计数器小案例进行阐述

1 了解组件之间共享数据的方式

父向子传值：通过v-bind 属性绑定
子向父传值：通过v-on事件绑定
兄弟组件之间共享数据：通过EventBus
使用 $on 接收数据的组件，使用 $emit 发送数据的组件

2 Vuex概述

2.1 Vuex 是什么

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

2.2 使用 Vuex 统一管理状态的好处

（1）能够在 vuex 中集中管理共享的数据，易于开发和后期维护
（2）能够高效地实现组件之间的数据共享，提高开发效率
（3）存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

2.3 什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

3 Vuex 的核心概念

3.1 State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

// 创建store数据源，提供唯一公共数据 
const store = new Vuex.Store({ 
    state: { count: 0 } 
})

组件访问 State 中数据的一种方式：

this.$store.state.全局数据名称

组件访问 State 中数据的第二种方式：
通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
1.从 vuex 中按需导入 mapState 函数

import { mapState } from 'vuex'

2.将全局数据，映射为当前组件的计算属性

computed: { 
...mapState(['count']) 
}

3.2 Mutation

Mutation用于变更 Store中的数据。
(1)只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
(2)通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

3.4 Action

Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

3.5 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。
(1)Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
(2)Store 中数据发生变化，Getter 的数据也会跟着变化。
在了解一些基本信息之后就开始小案例吧。

4 计数器小案例

使用vue ui新创建一个Vue项目，注意，项目中需要的一定要包括Vuex。
在store目录下的index.js文件中的state中添加count:0字段

import { createStore } from 'vuex'

export default createStore({
state: {
    count: 0
},
mutations: {
},
actions: {
},
getters: {},
modules: {
}
})

然后在components目录下新建Add.vue，Sub.vue组件，添加如下代码。使用$store.state.count访问state中的数据。

Add.vue
<template>
    <div>
        <h3>当前最新的count值为：{{$store.state.count}}</h3>
        <button @click="btnAdd">+1</button>
    </div>
</template>

<script>
    export default {
        data () {
            return {}
        },
        methods: {
        }
        }
        </script>

        <style scoped>

        </style>

        Sub.vue
        <template>
            <div>
                <h3>当前最新的count值为：{{count}}</h3>
                <button @click="btnSub">-1</button>
            </div>
        </template>

        <script>
        import { mapState } from 'vuex'
        export default {
        data () {
            return {}
        },
        methods: {
        },
        computed: {
            ...mapState(['count'])
        }
    }
</script>

<style scoped>

</style>

在App.vue中引入Add.vue以及Sub.vue组件

<template>
<div>
    <my-add></my-add>
    <p>-----------------------------------------</p>
    <my-sub></my-sub>
    <p>--------------------------------------------</p>
</div>
</template>

<script>
import Add from './components/Add.vue'
import Sub from './components/Sub.vue'
export default {
data () {
    return {}
},
components: {
    'my-add': Add,
    'my-sub': Sub
}
}
</script>

<style scoped>

</style>

接下来就编译运行。
对于数据增加操作，添加btnAdd事件，要想使count发生变化，应该利用Mutation。在Mutation中添加add方法

mutations: {
    add: function (state) {
    state.count++
    }
},

然后在btnAdd中触发该方法。
methods: {
    btnAdd: function () {
    this.$store.commit('add')
    }
}

方法中还可以传参，如果不想一次只增加1，那么就进行传参赋值。
在Sub组件中增加btnSub方法，然后在mutations中添加sub方法

mutations: {
    add: function (state) {
    state.count++
    },
    sub: function (state, step) {
    state.count -= step
    }
},

methods: {
    btnSub: function () {
    this.$store.commit('sub', 3)
    },
},

如果想要在add中添加setTimeOut方法进行每隔两秒修改数据，即使页面数据的确增加了，但是打开控制台会发现count依然没有任何变化，这是因为mutations中的方法是同步的，而setTimeOut是异步方法，而异步方法我们需要放在actions中进行操作。

在Add.vue中添加一个按钮

<template>
    <div>
        <h3>当前最新的count值为：{{$store.state.count}}</h3>
        <button @click="btnAdd">+1</button>
        <button @click="btnAddAsync">异步+1</button>
    </div>
</template>

在actions中添加addAsync方法。

actions: {
    // 在actions中不能够直接修改state中的数据，如果需要修改则需要通过context.commit()来触发mutations中的函数，只有mutations才能这样
    addAsync: function (context) {
    setTimeout(() => {
        context.commit('add')
    }, 2000)
    },
    }

在Add.vue中添加方法btnAddAsync。
this.$store.dispatch() 是触发 actions 的一种方式，

methods: {
    btnAdd: function () {
    this.$store.commit('add')
    },
    btnAddAsync: function () {
    this.$store.dispatch('addAsync')
    }
}

同样如果需要一次增加n，那么可以进行传参。

actions: {
    // 在actions中不能够直接修改state中的数据，如果需要修改则需要通过context.commit()来触发mutations中的函数，只有mutations才能这样
    addAsync: function (context) {
    setTimeout(() => {
        context.commit('add')
    }, 2000)
    },
    subAsync: function (context, step) {
    setTimeout(() => {
        context.commit('sub', step)
    }, 2000)
    }

在Sub.vue中添加按钮

<template>
    <div>
        <h3>当前最新的count值为：{{count}}</h3>
        <button @click="btnSub">-1</button>
        <button @click="btnSubAsync">-n异步</button>
    </div>
</template>

添加btnSubAsync方法

methods: {
btnSub: function () {
  this.$store.commit('sub', 3)
},
btnSubAsync: function () {
  this.$store.dispatch('subAsync', 4)
}

使用getters，在getters中添加showNum方法

getters: {
    showNum: function (state) {
    return '当前最新的数量是' + state.count
    }
},

在Add.vue中注释掉第一句话，然后添加

<template>
    <div>
        <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
        <h3>{{$store.getters.showNum}}</h3>
        <button @click="btnAdd">+1</button>
        <button @click="btnAddAsync">异步+1</button>
    </div>
</template>

使用getters中的方法this.$store.getters.名称