vuex中,map的四个方法

​​​​​​​使用方法前,必须先引入

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

使用以下4中方法如何传参数?    ---答案:在组件模板中调用方法时传参

​​​​​​​<template> 
<button @click="increment(num)">+</button>
</template>​​​​​​​

1、mapState方法

在组件.vue页面 , ‘极简获取’vuex中 state的数据为计算属性

computed:{
    //借助mapState生成计算属性,sum、school、subject、【对象写法】
    ...mapState({he:'sum',school:'school',subject:'subject'}),
    //借助mapState生成计算属性,sum、school、subject、【数组写法】
    ...mapState(['sum','school','subject'])
  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库。Vuex 将所有组件的状态集存储在一个单一的地方,称为 state。Vuex 的 state 是响应式的,这意味着当 state 发生变化时,与之相关的组件将自动重新渲染。 为了在组件使用 Vuex 状态,我们可以使用 mapState 函数。mapState 函数可以接受一个对象或数组作为参数,将 Vuex 的 state 映射到组件的计算属性。这样,我们就可以在组件像使用普通计算属性一样使用 Vuex 的 state。 例如,我们可以将 Vuex 的 state 映射到组件的计算属性: ``` import { mapState } from 'vuex' export default { computed: { ...mapState({ count: state => state.count }) } } ``` 上面的代码将 Vuex 的 count 状态映射到组件的计算属性。我们可以在组件像使用普通计算属性一样使用它: ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ count: state => state.count }) }, methods: { increment() { this.$store.commit('increment') } } } </script> ``` 在上面的代码,我们使用了 mapState 函数将 count 状态映射到组件的计算属性。然后,我们在模板使用这个计算属性来显示 count 的值。当用户点击“Increment”按钮时,我们调用 Vuex 的 commit 方法来更新 count 状态。由于 count 是响应式的,Vue.js 将自动重新渲染组件来显示新的 count 值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值