美文网首页Vue
Vuex中的state访问状态对象

Vuex中的state访问状态对象

作者: 凤箫之舞 | 来源:发表于2019-12-27 17:36 被阅读0次

state ,这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。

如何把状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。

我们有三种赋值方式。

一、通过computed的计算属性直接赋值

computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

例如:实现顶栏标题文字改变。

computed:{
  count: function () {
      return this.$store.state.count
    }
}

注意:return this.store.state.count这一句,一定要写this,要不你会找不到store的。
这种写法很好理解,但是写起来是比较麻烦的,那我们来看看第二种写法。

二、通过mapState的对象来赋值

1.首先要用import引入mapState

import {mapState} from 'vuex'

2.还在computed计算属性里写如下代码:

computed:mapState({
      count:state=>state.count
 })
  // computed: mapState({
  //   // ①ES5写法
  //   // count: function (state) {
  //   //   return state.count
  //   // }
  //   // ②ES6写法(箭头函数)
  //   count: state => state.count
  // })

三、通过mapState的数组来赋值
1.首先要用import引入mapState

import {mapState} from 'vuex'

2.还在computed计算属性里写如下代码:

computed: mapState(['count'])

这个算是最简单的写法了,在实际项目开发当中也经常这样使用。

uni-app中这么用:
1.import

    import {
        mapState
    } from 'vuex';
computed: {
            ...mapState(['hasLogin'])
        },

相关文章

  • Vuex中的state访问状态对象

    state ,这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。 如何把状态对象赋值给内部...

  • Vuex State访问状态对象

    单一状态树 Vuex使用一个单一的状态树——也就是说,这个单一的对象包含您所有的应用程序级状态,并充当“唯一数据源...

  • vue(四):vuex

    目录 1 引入 vuex 2 state 访问状态对象 3 mutations(同步) 模板获取方法 4 gett...

  • Vuex从入门到熟练使用

    本文github地址首先我问看下完整的Vuex选项对象 一、 state --- 访问状态对象 说明:也就是使用v...

  • 第二节:State

    state访问状态对象 vuex使用单一的状态树,用一个对象包括了整个应用的所有状态,也就是整个应用只包含一个st...

  • Vuex-State、Getter、Mutation、Actio

    一、state(状态) #使用state在 Vue 组件中获取Vuex 状态 (不常用 & 不能改变数据),想要获...

  • (二)state 访问状态对象

    本节知识点 把共享值赋值给数据 使用说明 必须要利用mapState这个对象了 首先第一步要引入进来 第二步在模板...

  • [2]state访问状态对象

    资料来源于技术胖的个人网站 访问状态对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。我们有三...

  • vue

    vuex 状态管工具 actions context 是 store的类实例,包含state对象属性和commit...

  • vuex的四大金刚

    1.State vuex的状态管理,需要依赖它的状态树 Vuex 使用单一状态树——用一个对象就包含了全部的应用层...

网友评论

    本文标题:Vuex中的state访问状态对象

    本文链接:https://www.haomeiwen.com/subject/jmidoctx.html