40-vue-在根据每个组件中的数据写成vuex时,注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)

1.vuex是全局的,所有组件都可以和它通信。

使用vuex后,与state有关的方法不需要在组件直接在传来传去。

2.getters对象中没有this,应该用getters来取代this

图片示例
在这里插入图片描述

3.高级计算属性(包含get、set)

  组件中get方法对应vuex中的getters对象。
  组件中set方法写成了vuex中的actions。

4.mapState、mapGetters

  mapState:组件中获得state对象中的共享状态。
  mapGetters:组件中获得vuex中的和共享状态有关的计算属性
(例如:假若数组是共享的状态,那数组的长度这个数据就是与数组相关的变量数据)
  mapGetters对象是用来获取vuex组件中的计算属性的。
  写的位置:mapGetters、mapState导入后,…mapState([ ])与…mapGetters({ })在组件中的computed勾子中写;

图片举例

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在`vue-element-admin`,使用Vuex实现vue组件的多个子组件共用和处理同1个字典变量的步骤如下: 1. 创建Vuex store: ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { dictionary: {} }, mutations: { updateDictionary(state, payload) { state.dictionary = payload; } } }) export default store ``` 2. 在父组件使用: ```html <template> <div> <child-component-1></child-component-1> <child-component-2></child-component-2> </div> </template> <script> import ChildComponent1 from './ChildComponent1.vue' import ChildComponent2 from './ChildComponent2.vue' export default { name: 'ParentComponent', components: { ChildComponent1, ChildComponent2 }, methods: { updateDictionary(dictionary) { this.$store.commit('updateDictionary', dictionary) } } } </script> ``` 3. 在子组件使用: ```html <template> <div> <button @click="updateDictionary">更新字典</button> </div> </template> <script> import { mapState } from 'vuex' export default { name: 'ChildComponent1', computed: { ...mapState(['dictionary']) }, methods: { updateDictionary() { const newDictionary = { key: 'value' } this.$store.commit('updateDictionary', newDictionary) } } } </script> ``` 在这个例子,我们在Vuex store创建了一个名为`dictionary`的state,以及一个名为`updateDictionary`的mutation,用于更新`dictionary`的值。在父组件,我们使用了两个子组件`ChildComponent1`和`ChildComponent2`,并提供了一个名为`updateDictionary`的方法,用于在子组件更新dictionary的值。在子组件,我们使用`mapState`将`dictionary`映射到computed属性,并使用`$store.commit()`方法来调用mutation更新dictionary的值。 这样,我们就可以在vue组件的多个子组件共用和处理同1个字典变量了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值