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的文章内容，若是文章有什么错误或者不清晰的地方，但愿帮个忙，指出一下，望共同窗习共同进步，那么，下篇文章见。