vuex+映射

目录

一、vuex作用

二、五个属性方法

 前四种方法用法图示

三、vuex的映射  

1、作用

模块的命名空间 

 2、mapGetters 

（1）没有命名空间

（2）有命名空间

3、mapMutations

（1）没有命名空间

（2）有命名空间

4、mapActions

（1）没有命名空间

（2）有命名空间

---

一、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;
		}
	},

<!-- mutations改变cartNum  commit 提交-->
<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>

 modules 子模块 

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

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

自定义user模块内代码展示

export default {
    state: {
        list: {
            name: "彭于晏"
        }
    },
    mutations: {
        SET_LIST(state, data) {
            state.list.name = data;
        }
    },
}

子模块在组件中使用

• 注意子模块中数据使用时要在.state后添加模块名
• 在模块里面访问方法不需要加模块名

<!-- 子模块中数据使用时要在.state后添加模块名 如.user -->

{{$store.state.user.list.name}}

<!-- 在模块里面访问方法不需要加模块名 -->

<button @click="$store.commit('SET_LIST','tky')">单击更改</button>

 前四种方法用法图示

三、vuex的映射  

1、作用

把vuex的数据与方法映射为组件的数据与方法

模块的命名空间 

作用:避免命名冲突     namespaced:true
state的访问默认是有命名空间的
getters,actions,mutations需要开启后才有命名空间

 2、mapGetters 

（1）没有命名空间

...mapGetters({
    fee:"fee"
}),
...mapGetters(["fee"]),

（2）有命名空间

...mapGetters({
    "rank":"test/rank"
})

3、mapMutations

（1）没有命名空间

...mapMutations({
"setUser":"SET_USERINFO"
})

（2）有命名空间

...mapMutaions:{
"setScore":"test/SET_SCORE"
}

4、mapActions

（1）没有命名空间

...mapActions({
    login:"login"
}),
...mapActions(["login"])
}

（2）有命名空间

...mapActions({
    log:"test/login"
})