vuex辅助函数

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

简单来说，就是类似一个共享数据管理的仓库，我们可以把一些多个地方需要使用到数据存储到仓库中，当我们做一些数据处理的时候，就可以对仓库中的数据进行操作，这样多个地方就可以实时更新数据。 （本人个人理解）

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex

2.map辅助函数mapState,mapMutations,mapGetters
1.三个函数都需要使用前导入

import { mapState, mapMutations, mapGetters } from 'vuex'

mapState
1.作用：拿到vuex中state中的数据

2.接收：在计算属性中接收,两种方式接收

        单个数据接收
computed: mapState([
                  // 映射 this.count 为 store.state.count
                  'username'
                ])
        多个数据接收（推荐）
computed: {
            // 可以写其它属性
              // 使用对象展开运算符将此对象混入到外部对象中
              ...mapState([' 属性名 '])
            }

3.使用: this.属性名 （属性名：state中的属性）

<div>用户名：{{username}}</div>
this.info

mapMutations
1.作用：调用方法修改vuex中的属性，此方式修改可以实时更新vuex
2.申明

mutations: {

    // 两种写法
    // SETUSERINFO(state, newInfo){
    //   return (state.userInfo = newInfo)
    // }

    // 修改用户信息
    SETUSERINFO: (state, newInfo) => (state.userInfo = newInfo),

  },

3.接收：可以接收多个方法
methods: { ...mapMutations(['方法名','方法2...']
}`
此方法有一个参数，state：是vuex中state对象
传入一个参数时直接传入，传入多个参数可以传对象

4.使用：首先需要在vuex中定义mutations，对象里面定义针对vuex中操作的方法
通过this.方法名调用

this.方法名(参数)
mapGetters
1.作用：类似于计算属性，在vuex中对数据进行操作并返回

2.申明

getters: {
setGender (state) {
const gender = { 0: '保密', 1: '男', 2: '女' }
return gender[1]
}
}

3.接收：在计算属性中接收
此方法与mapMutations类似

标签：辅助,函数,Vuex,newInfo,state,接收,vuex,属性
来源： https://www.cnblogs.com/qiaozhiming123/p/14853217.html