vuex入门篇 -- state和getters

前言

从这一篇文章开始,将要学习的是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

你可能感兴趣的:(vuex入门篇 -- state和getters)