vuemapgetters的简单介绍

本篇文章给大家谈谈vuemapgetters，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue Syntax Error: Unexpected token ...mapGetters编译报错
• 2、vuex实现宽高自适应
• 3、vue: 解决vuex页面刷新数据丢失问题
• 4、vuex使用getters篇
• 5、vue--store中各个属性

vue Syntax Error: Unexpected token ...mapGetters编译报错

用 vue-cli2.x 写项目时用到了对象的扩展运算符 ... , 在磨橘运行项目时报如下错误:

Syntax Error: Unexpected token ...mapGetters编译报错 .

解早游李决方案：

配置 .babelrc 即可陆迟

{"presets":["stage-2"]}

[img]

vuex实现宽高自适应

//app.vue里设置，宽度通过栅格控制，高度通过vuex获取高度

  export default {

    name: 'App',

    data() {

      return {

        window: {

          width: document.body.clientWidth,

          height: document.body.clientHeight

       知手吵 }

      }

    },

    methods: {

      initWindow() {

        this.$store.dispatch('setWindow', this.window)

        window.onresize = () = {

          return (() = {

            this.window.width = document.body.clientWidth

            this.window.height = document.body.clientHeight

            this.$store.dispatch('setWindow', this.window)

          })()

        }

     薯仔 }

    },

    created() {

      this.initWindow()

    }

  }

页面用法：

  computed: {

    ...mapGetters({

      mainHeight: 'getMainHeight'

    }),

    chartStyle1() {

      const height = this.mainHeight * 0.24 - 6

      return {

        color: '#fff',

       搭侍 width: '100%',

        height: height + 'px'

      }

    }

  }

vue: 解决vuex页面刷新数据丢失问题

1、一般在登录成功的时候需要把用户信息，姿脊腔菜单信息放置 vuex 中，作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化，导致数据丢失野旁。因为 vuex 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被清空。

2、我在一个组件（例迹衫如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化，使用通过计算属性实现响应数据的变化，mapGetters 获取 vuex

但是刷新页面后数据丢失了！！

vuex使用getters篇

注意点：

1.getter 在通过属性访问时是作为 Vue 的响应式系统盯耐的一部分缓存其中的。

2.getter是自带缓存的不用写在computed中

3.如果在一个普通方法中返回牵扯到getter的数据跟data中的数据，任何一个数据改变都会引起普通方法之行，

相当于store.state.count+this.count在computed里面同样的效果，store.state.count与this.count任何一个变化都会引起computed里面的方法函数执行。

记录语法以下面例子为例：

在vue组悄粗件中的调用方法一

在vue组件中的调用方法二

在vue组件中使用mapGetters调用方发三（最常用）

在vue组件中使用mapGetters方法四另外取名凯运春

vue--store中各个属性

select v-model="xueli" @change="changeFn"

      option value="0"请选择学历/option

      option value="1"大专/option

      option value="2"本科/option

    /select

如上述，xueli绑定的值是字符串1，2，3，如改成如下加上v-bind的形式，数据监测的值为数字

option v-bind:value="1"请选择学历/option

或者v-model.number="xueli" 也可以完成相同的要求

vux-getters

getters: {/* 计算组件中数据，可以对其二次加工，类似computed */

  /* 具有缓存功能，如果state中的数据得到了改变，那么getters中的属性也会发生改变， 反之则不会改变源族 */

  getDazhuan:function(state){

    return state.list.filter(r=r.xueli=='大专')

  }

getter中的数据，组件可以使用this.$store.getters.getDazhuan获取

state中的数据，组件可以使中桐用this.$store.state.list获取

组件可以在methods中创建事件，利用commit传值给mutations或者dispatch传值给actions

methods:{

del(){

      this.$store.commit('DELNUM',this.num)

    }   ,

    add(){

      this.$store.dispatch('addajax',this.num)     括号中两个参数，第一个表示事件卖裂坦名，第二个是传参

    }          }

mutations: {

 DELNUM:function(state,payload){

    state.num-=payload

  },

  ADDNUM:function(state,data){

    state.num+=data

  }},

actions: {/* 调后台接口并commit提交一个mutations

               里面的方法用小写为了区分mutations里面的方法*/

            /* 异步请求要放在actions方法中去写 ，不要再组件中去写，不然起不到作用 */  

            addajax({commit},data){

              /* 使用解构出来的commit方法来提交一个mutation方法ADDNUM来修改state中的值 */

              setTimeout(()={                           异步请求

                commit('ADDNUM',data)            触发$sotre.mutations中的ADDNUM方法

              },500)

            }

  },

导出vuex中的mapState,mapGetters方法

import {mapState,mapGetters} from 'vuex'

 computed:{

    /* 利用mapState方法使用拓展运算符把list,getDazhuan解构在计算属性中 */

   mapState(['list'])

   mapGetters(['getDazhuan','getBenke']) 

}

插值中可以直接用list,getDazhuan,getBenke表示

vue实例中可以直接用this.list,this.getDazhuan,this.getBenke表示

关于vuemapgetters和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。