vue-x中的statevuex是一个企业级程序的状态管理的高效工具，在项目中经常会用到。 vuex之中的两大关键字，s

vuex是一个企业级程序的状态管理的高效工具，在项目中经常会用到。

vuex之中的两大关键字，state，getters的设置

state

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

什么是状态呢？

是否登录就是一种状态，通过signIn这个布尔变量来表示用户的登陆状态。这实际上就是state之中设置的数据。

可以将状态理解成为控制展示的数据变量

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据： $store.dispatch('action中的方法名',数据) 或$ store.commit('mutations中的方法名',发送到mutation中的数据)。

** 1.通过this指针，使用$store变量来获取vue之中设置的vuex对象，从而获取当前状态数据。**

获取的时候，如果状态变量编写在了modules（模块）变量之中的话（模块状态管理状态），那么我们获取的方式可见示例代码的user Name的获取方式，这里userName被编写在了名称为user的模块之中。代码如下：

获取编写在了modules（模块）变量之中user的模块之中的userName

computed: {
  appName() { return this.$store.state.appName } ,//写在全局状态中
  //如果状态变量编写在了modules（模块）变量之中的话（模块状态管理状态），通过this指针获取vue之中设置的vuex对象，
  //获取编写在了modules（模块）变量之中user的模块之中的userName
  userName() { return this.$store.state.user.userName }
}

store.js的代码：

{
    state: {
        appName: "App"
    },
    //全局状态管理
    getters: {
        firstLetter:(state) => {
            return state.appName.substr(1, 1)
        }
    },
    
    modules:{
        user: {
            namespaced: true,
            state:{
                userName: "Arvin Huang"
            },
            //模块状态管理（写在modules模块中，必须要写命名空间）
            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可以顺利的引入。
复制代码

mapState（）辅助函数

2.通过mapState（）来进行获取: vuex为我们提供了mapState方法来进行状态的获取注入。

当一个组件上需要获取多个状态时，mapState（）辅助函数帮助我们生成计算属性

可以传递的参数有namespace（命名空间）和 map（对象或者数组）

对象的之中的元素对应的是函数，函数拥有一个参数state，指向的是状态对象。
数组项之中传递需要注入的变量的名称的字符串，（mapState简化写法）如果不需要对state进行额外处理的话，写法还可以进一步简写为数组式

mapState依据传递的参数返回对应的结果对象

//首先要引入：
import { mapState } from "vuex"
//写法一：传入对象式写法
//在computed之中使用(传入对象):
computed: {
    ...mapState({
        appName: state => state.appName,
        userName: state => state.user.userName
        //箭头函数使代码更简洁，函数拥有一个参数state，指向的是状态对象）
    })
}

简写（传入数组）, 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。在传递数组的时候，没有传递命名空间的话，将只会在全局状态管理对象的state之中查找相关变量,如果没有本地变量为空）全局则简写为以下

computed: {
    ...mapState(['appName','userName'])

当我们想要获取模块中设置的state对象的值的时候(例如 user模块):


store.js之中设置如下：
{

    state:{
        ...
    },
    //// mutations: 专门书写方法,用来更新 state 中的值
    ////准备mutations对象——修改state中的数据
    //组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
    modules:{ //这一设置关键字将会在之后的modules片之中详细说明。
        user:{
            namespaced: true (特别注意)
            state:{
                app: 'app',
                user: 'Arvin'
            }
        }
    }
}
这时候获取user之中的信息方式如下：
computed: {
    ...mapState('user', [
        'app',
        'user'
    )
}

传递对象的时候就形如之前的代码一样，完全可以取的到模块之中的状态变量信息。

注意:模块之中添加的状态管理对象，如果设置了namespaced的话，那么当前的命名空间作为值传递给mapState作为第一个参数，将会是有效的，如果没有设置namespaced则传递之后，vuex将会提示找不到相关的命名空间。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情