vuex的使用之mapGetters[通俗易懂]

全栈程序员站长

发布于 2022-08-31 11:12:59

1.7K0

发布于 2022-08-31 11:12:59

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

vue项目中，经常会使用到vuex，vuex是vue的一个状态管理。

本文简单总结一下：vuex中mapGetters的使用。

如果一个变量或对象需要在多个页面和组件中使用，那么，可以使用mapGetters。

一.vuex中声明变量个方法

1.在state中声明：

state: {
   freeShipping:cookie.get('freeShipping'),
}

2.在mutations中书写方法：

mutations: {
    updatefreeShipping(state, freeShipping) {
            state.freeShipping =freeShipping;
        },
 }

3.在getters中书写：

getters: {
    freeShipping: state => state.freeShipping || {}
}

二.在各页面中使用

1，引入

   import { mapGetters  } from "vuex";

2，在method同级上放入computed

computed: mapGetters(["freeShipping"]),

或

computed: {
               ...mapGetters(["freeShipping"])
          } ,

可放入多个对象

  computed: mapGetters(["userInfo","freeShipping"]),

3，页面变量取用

{
  
  {freeShipping.value}}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/144026.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度