vuex+映射

大脸胖柴

已于 2024-08-23 17:45:49 修改

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-11 21:50:29 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/126293719

版权

mapActions与mapMutations注意：

五、使用模块化后的vuex4个map映射方法

一、vuex作用

vuex是vue的全局状态的管理工具
vuex数据更新，其引用组件都会响应式的更新
如果项目不大，不建议使用vuex

二、五个属性方法

state

作用：

存放数据的地方
vuex中的state数据同渲染指令可以渲染到vue组件中(响应式更新:数据变化视图会自动更新)

组件中使用方法：$store.state.xxx
实例：
// state存储数据的地方
	state: {
		cartNum: 10,
		price: 255,
	},
<p>商品数量 {{$store.state.cartNum}}</p>

getters

作用：从现有数据计算出新的数据
组件中使用方法：$store.getters.xxx
实例：
// 从现有数据计算出新的数据
	getters: {
		// 价格的百分50%
		// 从现有的价格计算出fee
		fee: function(state) {
			return state.price * 0.5;
		}
	},
<p>商品的提成:{{$store.getters.fee}}</p>

mutations

作用：mutations是改变vuex state中数据的唯一方式
组件中使用方法：$store.commit(方法,数据)
实例：
// mutations是改变数据state的唯一方式
	// 建议大写
	mutations: {
		// 更改购物车的数量
		SET_CARTNUM(state, data) {
			state.cartNum = data;
		}
	},

<button @click="$store.commit('SET_CARTNUM',18)"> 改变购物车18</button>
上方简单使用方式只能单个方法对应修改单个数据，下方来拓展延伸下
实现方法的公用性
同一方法修改多个数据
mutations: {
    setAppState(state, [key, value]) {
      state[key] = value;
    },
}
传入不同数据进行修改
this.$store.commit('setAppState', ["flag", true])
其他方法大家可尝试扩展。

actions

作用：

actions动作,异步,延迟方法,不能直接修改state
actions通过 commit 执行 mutations中的方法

组件中使用方法：$store.dispatch(方法,数据)
实例：
// actions动作,异步,延迟方法,不能直接修改state
	actions: {
		setCart(context, data) {
			setTimeout(() => {
				// context就是$store
				// 等待4秒把执行SET_CARTNUM,传参参数data
				context.commit("SET_CARTNUM", data)
			}, 4000)
		}
	},
<button @click="$store.dispatch('setCart',100)">等4秒把购物车数量改为100</button>

actions案例二：axios请求

modules

介绍：把store分为很多小模块，每一个模块都有自己的state，getters，action，mutation属性，最后合并到一起

使用：新建组件，导入新组件，方法中注册组件

访问或使用模块中的数据或方法

注意：访问模块中的数据需要在state后加模块名称，访问模块中的方法则不需要。

方式一（便捷）：（注意：getters需要开启命名空间）

自定义user模块内代码展示

export default {
    namespaced:true, // 使用模块化时getters需要开启命名空间才能访问到，否则为undefined
    state: {
        list: {
            name: "彭于晏"
        }
    },
    mutations: {
        SET_LIST(state, data) {
            state.list.name = data;
        }
    },
    getters: {
      feeNum(state) {
        return state.num + 1
      },
    },
}

访问数据举例
this.$store.state.user.list.name
this.$store.getters['moduleOne/feeNum']; 注意开启命名空间
访问方法举例---mutations、actions均无需加模块名
this.$store.commit('SET_LIST','胡歌')

方式二（正规但繁琐）：

三、前四种方法用法图示

四、vuex的4个map映射方法

1、mapState方法

前言：当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。

未使用mapState映射：

不声明为计算属性直接使用
{{$store.state.sum}}

声明为计算属性再使用
{{sum}}
computed:{
  sum(){
    return this.$store.state.sum;
  },
  sumTwo(){
    return this.$store.state.sumTwo;
  },
}
可以看到以上两种方式使用代码重复率太高，太过冗余

使用mapState映射流程

import {mapState} from 'vuex'; // 需要使用mapState的组件引入

computed:{
  // 对象写法 可修改state状态名称如：sum 改为 sumNum
  ...mapState({sumNum:'sum',sumNumTwo:'sumTwo'}),
  // 数组写法 只可与state状态名称一一对应，不可修改状态名称
  ...mapState(['sum','sumTwo']),
}

2、mapGetters方法

前言：同mapState原理相同

未使用mapGetters映射：

不声明为计算属性直接使用
{{$store.getters.bigSum}}

声明为计算属性再使用
{{bigSum}}
computed:{
  bigSum(){
    return this.$store.getters.bigSum;
  }
}
可以看到以上两种方式使用代码重复率太高，太过冗余

使用mapGetters映射流程

import {mapGetters} from 'vuex'; // 需要使用mapGetters的组件引入

computed:{
  // 对象写法 可修改getters方法名称如：bigSum 改为 bigSumGets
  ...mapGetters({bigSumGets:'bigSum',sumGets:'sum'}),
  // 数组写法 只可与getters方法名称一一对应，不可修改方法名称
  ...mapGetters(['bigSum',sum]),
}