其他分享
首页 > 其他分享> > vuex辅助函数

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