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类似,也是有一个参数state,也可以传参

computed: {
    // 分辨性别
    ...mapGetters(['setGender']),
  }

4.使用:首先需要在vuex中定义getters,类似于计算属性,里面定义一个方法,需要返回一个值
通过this.属性名调用

<div>性别:{{setGender}}</div>
Logo

前往低代码交流专区

更多推荐