Vuex基本使用

发表于 分类于

前言

在使用Vue.js制作项目时，有时发现一些变量和参数需要在多个组件之间进行使用，且组件A中该参数的改变需要同时使组件B发生相应更新；因此就需要在这些组件能够共同访问的地方定义公共参数。

之前使用过一个『不太好』的方法，就是直接在Vue对象（准确来说相当于Vue class）的prototype上添加需要使用的公共变量，因此所有Vue实例（包括组件，因为组件实际上也是Vue实例？）都可以继承并访问到这个属性，也就可以在多个组件间进行使用。然而这里实际上有个『坑』，理解原型链就能知道，对Vue实例的属性进行改变并不会影响到Vue的prototype同名属性，自然也就无法对其他组件进行及时更新；这么做也无法使用Vue本身的数据依赖机制，但是如果那个公共属性是常量的话完全可以使用上述方法。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简言之，Vuex就是用来在Vue中管理组件状态的官方工具。

基本概念

State

相当于Vue实例或组件中的data属性，在组件中可以通过this.$store.state来访问获取相应的state属性；

Getter

相当于Vue实例或组件中的computed属性，定义一个方法来对某一个或多个state进行处理，并返回相应的值，因此该方法依赖于用到的state属性，只要依赖的state属性没有发生改变，该getters的值就不会发生改变；在组件中可以通过this.$store.getters来访问获取相应的getters属性；

Mutation

为了方便进行管理数据依赖，并不能直接对store里的state进行直接更改，唯一的方法就是使用mutations里注册的方法进行相应更改；因此mutations就相当于Vue实例或组件中的methods属性，并且类似于组件中的自定义事件，需要使用的时候要『触发』相应的方法，即在组件中要使用this.$store.commit('type', payload)，其中type就是mutations中定义的方法名，prelaod就是需要传给该方法的参数。需要注意的是在mutations中的方法必须是同步的，即不能有异步回调！！！

Action

跟mutations类似，actions也相当于Vue实例或组件中的methods属性；但是actions里的方法一般都是执行异步回调操作，并在回调完成后执行commit操作来『触发』mutations中的方法。在组件中可以使用this.$store.dispatch('type', payload)来『触发』相应的actions方法。

响应式获取状态

在组件中如果要响应式地依赖状态值，那么最好在computed属性中返回一个状态，这样状态一旦改变，这边的值也会相应的更新。如：

1
2
3
4
5
6
7
8
9
10
export default {
    computed: {
        playing(){
            return this.$store.state.playing
        },
        song(){
            return this.$store.getters.curSong
        }
    }
}

参考文档

  1. Vuex 是什么？ | Vuex