Vuex映射

更新日期: 2020-08-26阅读: 1.3k标签: vuex

vuex 是一把双刃剑。如果使用得当,使用 Vue 可以使你的工作更加轻松。如果不小心,它也会使你的代码混乱不堪。

使用 Vuex 之前,你应该先了解四个主要概念:state、getter、mutation 和 action。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。 Vuex 中的映射提供了一种从中检索数据的好方法。

在文中,我将演示如何映射 Vuex 存储中的数据。如果你熟悉 Vuex 基础,那么这些内容将会帮你编写更简洁、更便于维护的代码。

本文假设你了解 Vue.js 和 Vuex 的基础知识。


Vuex 中的映射是什么?

Vuex 中的映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 action)绑定到组件中的计算属性,并直接使用 state 中的数据。

下面是一个简单的 Vuex store 例子,其中测试数据位于 state 中。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

如果要从 state 中访问 data 的值,则可以在 Vue.js 组件中执行以下操作。

computed: {
        getData(){
          return this.$store.state.data
        }
    }

上面的代码可以工作,但是随着 state 数据量的开始增长,很快就会变得很难看。

例如:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{
          name:"user name",
          address:"user address"
        }
    },
    services: {},
    medical_requests: {},
    appointments: {},
    }
  }
})

要从处于 state 中的用户对象获取用户名:

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

这样可以完成工作,但是还有更好的方法。


映射 state

要将 state 映射到 Vue.js 组件中的计算属性,可以运行以下命令。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

现在你可以访问组件中的整个用户对象。

你还可以做更多的事,例如把对象从 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

如你所见,这要干净得多。可以通过以下方式轻松访问用户名:

{{user.data.name}}

services 对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 mapState() 的吗?如果需要为值指定其他名称,则可以传入一个对象。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

现在可以通过简单地调用 userDetails 来引用 user。


何时映射整个 state

根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射。

在上面的例子中,如果我们只需要一个值(例如 username),则映射整个用户对象就没有多大意义。

在映射时,整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能。


映射 getter

映射 getter 的语法与 mapState 函数相似。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

与映射 state 类似,如果你打算使用其他名称,则可以把对象传递给 mapGetters 函数。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

映射 mutation

映射 Mutation 时,可以在用以下语法来提交 Mutation。

this.$store.commit('mutationName`)

例如:

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`

      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })
  }
}

映射 action

映射 action 与映射 mutation 非常相似,因为它也可以在方法中完成。使用映射器会把 this.$store.dispatch('actionName') 绑定到映射器数组中的名称或对象的键。

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`

      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })
  }
}

总结

看到这里,你应该能够学到:

  • 对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解
  • 能够映射 Vuex store 中的所有组件(state、 getter、 mutation、action)
  • 知道什么时候应该映射 store
原文:https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/

    链接: https://www.fly63.com/article/detial/9675

    为什么使用Vuex

    在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。

    Vue.js学习,关于Vuex源码解析

    Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。

    vue + vuex + koa2交互实例

    主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径

    vuex 源码:深入 vuex 之 mutation

    vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。

    使用Vuex解决Vue中的身份验证

    Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

    关于Vuex的action传入多个参数的问题

    已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

    Vuex 的异步数据更新

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。

    vue单页面应用刷新网页后vuex的state数据丢失的解决方案

    其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

    Vuex状态管理,state、getter

    首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

    Vuex新手的理解与使用

    开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!