vuex-class用法
vuex-class可以包装vuex的写法,使代码简化
Installation
$ npm install --save vuex-class
Example
import Vue from 'vue'
import Component from 'vue-class-component'
import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class'
const someModule = namespace('path/to/module')
@Component
export class MyComp extends Vue {
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo
// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux
created () {
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
this.moduleGetterFoo // -> store.getters['module/foo']
}
}
vuex-class用法的更多相关文章
- Vuex 常规用法
背景 很多时候我们已经熟悉了框架的运用,但是有时候就是忘了怎么用 所以这里想记下大部分的框架使用方法,方便使用的时候拷贝 一.安装 npm 方式 npm install vuex --save yar ...
- vue vuex的用法
1.引入 vue.js vuex.js 文件 2.创建Store文件 var sSatte=new Vuex.Store({ state:{}, mutations:{}, actions:{ ...
- vuex 基本用法、兄弟组件通信,参数传递
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦. vuex大概思路:a=new Vue(),发射数据'msg':a.$emit ...
- vuex的用法
https://segmentfault.com/a/1190000015782272
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- vue2.0项目实战(5)vuex快速入门
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- 09:vuex组件间通信
1.1 vuex简介 官网:https://vuex.vuejs.org/zh/guide/ 参考博客:https://www.cnblogs.com/first-time/p/6815036.htm ...
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...
- 4 vuex的安装
安装可以看,引入又问题https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1(引入) htt ...
随机推荐
- mysql优化---订单查询优化(1):视图优化+索引创建
订单的表结构采用了垂直分表的策略,将订单相关的不同模块的字段维护在不同表中 在订单处理这个页面,需要查询各种维度, 因此为了方便查询创建了v_sale_order视图(老版本) drop view v ...
- 【0725 | Day 1】计算机编程/计算机组成原理/计算机操作系统
什么是编程 编程语言:人与计算机交流的手段 编程:通过编程语言编写文件 学习编程的目的:让计算机代替人力,为我们服务 计算机组成原理 计算机由五大部分组成:控制器.运算器.存储器.输入设备.输出设备. ...
- DT-06 For MQTT
感谢关注深圳四博智联科技有限公司产品!我公司提供完整的WiFi信号强度采集方案,包括WiFi信号采集.设备远程管理平台.智能终端应用等. Doit_MQTT透传固件基于乐鑫ESP_IOT_SDK使用C ...
- django报错信息解决方法
You have 17 unapplied migration(s). Your project may not work properly until you apply the migration ...
- HelloDjango 第 08 篇:开发博客文章详情页
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...
- DC-2靶机渗透
靶场下载链接: Download: http://www.five86.com/downloads/DC-2.zip Download (Mirror): https://download.vulnh ...
- vue入门:用户管理demo
该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...
- Python学习 之 Python入门
第二章 Python入门 2.1 环境安装 2.1.1 下载解释器: py2.7.16 (2020年官方不再维护) py3.6.8 (推荐安装) 1.下载解释器一定去官网下载,https://www. ...
- Oracle EM的重新配置和界面语言修改
实际在国内的DBA日常工作中,几乎很少会用到EM进行日常管理.但在Oracle的考试中,为了快速完成某些场景的应答,还是推荐使用EM进行操作的. 1.重新配置EM 2.修改界面语言 1.重新配置EM ...
- unity,C#,游戏面试笔试真题
最开始的两家公司笔试面试题目 一家公司是学校聘请研究教育方面VR课件的公司,面试没几天,就收到了面试通过的消息,后面因为通过了另一家游戏公司而拒绝了. 另一家公司是一家游戏外企,在春熙路,当时笔试还可 ...