博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vuex使用之state访问状态对象
阅读量:4876 次
发布时间:2019-06-11

本文共 669 字,大约阅读时间需要 2 分钟。

引入vuex

1.利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。

2.新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。

import Vue from 'vue';

import Vuex from 'vuex';

3.使用我们vuex,引入之后用Vue.use进行引用。

Vue.use(Vuex);

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

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

computed:{

  count(){
    return this.$store.state.count;
  }
}

二、通过mapState的对象来赋值

我们首先要用import引入mapState。

import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码:

computed:mapState({

  count:state=>state.count
})

三、通过mapState的数组来赋值

computed:mapState(["count"])

 

转载于:https://www.cnblogs.com/lhl66/p/7389123.html

你可能感兴趣的文章
gridview 根据条件更改链接的可用和颜色
查看>>
10.26会议记录
查看>>
SpringBoot用SpringAOP实现页面访问日志功能
查看>>
C# 中的"yield"使用
查看>>
(27)zabbix自定义图表Graph
查看>>
学生和老师思考问题角度的区别
查看>>
通过反射,给对象之间赋值
查看>>
Unity2.0学习笔记-Unity2.0基础-如何配置Unity2.0容器-设计时配置
查看>>
常用的电脑快捷键
查看>>
linux如何查看所有的用户和组信息?
查看>>
iOS-当输入框被键盘遮挡时让整个view上移
查看>>
python 列表去重(数组)的几种方法
查看>>
C# virtual and overide
查看>>
蜗牛历险记(二) Web框架(下)
查看>>
2017.07.31软件更新公告
查看>>
综合练习:英文词频统计
查看>>
版本控制系统git
查看>>
git使用
查看>>
【BZOJ-3165】Segment 李超线段树(标记永久化)
查看>>
正则表达式语法
查看>>