vuex入门篇 -- state和getters

短命女 2022-10-01 09:44 224阅读 0赞

### 前言 ###

从这一篇文章开始，将要学习的是vuex的入门基础内容。vuex是一个企业级程序的状态管理的高效工具，官方认证。也将是我们和vue打交道的内容之中常常会接触到的部分。让我们来一步一步的全面的吃掉它吧。本篇文章我们主要是讲解vuex之中的两大关键字，state，getters的设置。走起吧。

--------------------

### state ###

state，翻译成中文表示的是状态一词，所以我们可以很明确的说这个关键字下面存储的实际上就是状态。但是什么是状态呢？

例如，我们之前在vue-router学习过程之中提到的关于**登陆**的例子，是否登陆实际上就是一种状态，我们通过signIn这个布尔变量来表示用户的登陆状态。这实际上就是state之中设置的数据。

所以我们在vue之中可以将状态理解成为**控制展示的数据变量**。但是有的时候我们的数据变量将会同时用于展示和控制，这一块我觉的，控制成分较多的变量完全也可以将他理解成为页面或者组件的状态，并分离出来交由vuex来进行统一的管理。

既然在vuex之中已经设置号了状态，则我们能可以开始在组件和页面之中进行使用了。使用的方式主要是由如下几种：

*  通过this指针，使用$store变量来获取vue之中设置的vuex对象，从而获取当前状态数据,当然获取的时候，如果状态变量编写在了modules（模块）变量之中的话，那么我们获取的方式可见示例代码的user Name的获取方式，这里userName被编写在了名称为user的模块之中。代码如下：

computed: {
        appName() { return this.$store.state.appName } ,
        userName() { return this.$store.state.user.userName }
    }
    复制代码

*  通过mapState来进行获取: vuex为我们提供了mapState方法来进行状态的获取注入。mapState本身是一个方法。可以传递的参数有namespace（命名空间）和 map（数组或者对象 -- 数组项之中传递需要注入的变量的名称的字符串，对象的之中的元素对应的是函数，函数拥有一个参数state，指向的是状态对象）。mapState依据传递的参数返回对应的结果对象。使用mapstate要注意的一点就是模块之中添加的状态管理对象，如果设置了namespaced的话，那么当前的命名空间作为值传递给mapState作为第一个参数，将会是有效的，如果没有设置namespaced则传递之后，vuex将会提示找不到相关的命名空间。上代码：

首先要引入：
    import { mapState } from "vuex"
    
    
    然后同样是在computed之中使用(传入对象):
    computed: {
        ...mapState({
            appName: state => state.appName,
            userName: state => state.user.userName
        })
    }
    
    
    另外一种写法（传入数组, p.s. 在传递数组的时候，没有传递命名空间的话，将只会在全局状态管理对象的state
    之中查找相关变量,如果没有本地变量为空）
    computed: {
        ...mapState([
            'appName',
            'userName'
        ])
    }
    
    
    当我们想要获取模块中设置的state对象的值的时候(例如 user模块):
    store.js之中设置如下：
    {
        state:{
            ...
        },
        modules:{ //这一设置关键字将会在之后的modules片之中详细说明。
            user:{
                namespaced: true (特别注意)
                state:{
                    app: 'app',
                    user: 'Arvin'
                }
            }
        }
    }
    这时候获取user之中的信息方式如下：
    computed: {
        ...mapState('user', [
            'app',
            'user'
        )
    }
    传递对象的时候就形如之前的代码一样，完全可以取的到模块之中的状态变量信息。
    复制代码

*  同样的当我们想要获取到模块之中的state的时候，我们可以借助vuex之中的createNamespacedHelpers方法来弱化其中的模块意味。我们可以引入这一方法之后，通过调用它并传递需要的数据的模块名称，从而得到对应于模块名称的状态管理对象，这一对象之中就包括了针对模块的特定的mapState等方法。我们获取之后，直接传递数组对象，就可以获得模块下我们需要的数据。但是需要注意的是这个方法专门针对于模块之中设置了namespaced（命名空间）属性的管理对象有效，如果没有设置，vuex将会提示错误。让我们看一段代码，将会更明确一点：

同样还是以之前的user模块作为例子：可见上面代码之中store.js的设置的那一段，此处也一定需要设置号namespaced属性，如果没有设置则vuex将会报错，我们在组建之中可以如是写
    
    引入：
    import { createNamespacedHelpers} from "vuex"
    const { mapState } = createNamespacedHelpers("user");
    
    逻辑部分：
    computed: {
        ...mapState([
            'app',
            'user'
        ])
    }
    复制代码

*  再次特别提示，当我们在modules之中设置的状态管理对象启用了了namespaced(命名空间属性)属性，则当使用mapState传入namespace的时候才会有效果，createNamespacedHelpers方法也才能生效，否则vuex将会报错。而当传毒mapState之中的是对象内容的时候，将会不受影响，同样的通过this指针来调用也不需要改变。

--------------------

### getters ###

下面我们来看一下getters，getters主要是从state之中派生出的额外的状态。类似于vue对象之中的computed了。getters对象之中的每一个元素都是一个方法，传递state对象作为参数。并且getters是会缓存相关的计算数据的，并会随着state的变化而做出相应改变的。来一段简单的代码：

state: {
        appName: "App"
    },
    getters: {
        firstLetter:(state) => {
            return state.appName.substr(0, 1)
        }
    }
    复制代码

在来我们还是需要了解他的使用方法了：

*  this指针之中$store状态管理对象之中的getters来获取模块之中的管理对象。当设置了namespaced的时候，我们需要通过相应的 `模块名称 / getter名称` 的形式来获取对应的getter内容。 如果没有设置namespaced的时候，则可以`直接通过getter名称来获取`。但是getter重名的时候vuex会怎么做呢，这时vuex将会提示重名错误提示，但程序依旧可以运行。由于其读取的方式是`自外而内的，自上而下的`，所以最终所有重名的getter的值缓存的将会是最后一个为此名称的getter计算出来的值。我们使用上面store.js的设置作为例子，我们需要如下代买进行操作：

有namespaced设置的：
    lastLetter() {
        return this.$store.getters['user/lastLetter'];
    }
    
    没有namespaced设置的：
    lastLetter() {
        return this.$store.getters.lastLetter;
    }
    复制代码

*  通过mapGetters来进行getter的获取，我们同样可以引入getter为自己所用。全局状态管理模块的getter获取不在话下，但是模块状态管理对象有没有设置命名空间也会影响getter的获取。当没有设置的时候，mapGetters可以直接获取当前模块状态管理对象的getters。设置了的话则不行。我们来用一段代码说明这一切。

store.js的代码：
    {
        state: {
            appName: "App"
        },
        getters: {
            firstLetter:(state) => {
                return state.appName.substr(1, 1)
            }
        },
        modules:{
            user: {
                namespaced: true,
                state:{
                    userName: "Arvin Huang"
                },
                getters: {
                    lastLetter: (state) => {
                        return state.userName.substr(-1, 1);
                    }
                }
            },
            users: {
                state: {
                    userName: 'Arvin Huang'
                },
                getters: {
                    thridLetter: (state) => {
                        return state.userName.substr(3, 1);
                    }
                }
            }
        }
    }
    
    引入的代码：(import部分的代码不要忘了，这一段代码要卸载computed之中哟)
    ...mapGetters([
        "firstLetter",
        "lastLetter",
        "thridLetter"
    ]),
    vuex将会提示lastLetter是不知道的getter，而thridLetter可以顺利的引入。
    复制代码

*  最后也使用过createNamespacedHelpers来进行操作，类似于之前state之中说的。只有模块状态灌流i想设置了命名空间，这一方法才会有用。而且使用起来和之前相似，只是将代码段之中的mapstate变成了mapGetters而已。这里就不再摆出详细代码。

*  这里再次强调一边namespaced的重要性，重要的事情说三遍嘛，具体的差别在之前的没一点之中已经详尽说明。

--------------------

### 结尾 ###

之后还会陆续的编写出其他的关于vuex的文章内容，如果文章有什么错误或者不清晰的地方，希望帮个忙，指出一下，望共同学习共同进步，那么，下篇文章见。

转载于:https://juejin.im/post/5cda6cd2f265da034c704a5e