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 ...
随机推荐
- 基于RobotFramework实现自动化测试
Java + robotframework + seleniumlibrary 使用Robot Framework Maven Plugin(http://robotframework.org/Mav ...
- JavaWeb——Servlet开发3
1.使用初始化参数配置应用程序 初始化参数的方式有两种 在Web.xml文件中使用<context-param>标签声明上下文初始化参数 <context-param> < ...
- js动态添加<tr><td>
<form id="addNewsFormData" name="addNewsFormData" isCheck="true" ac ...
- Yii CGridView 之 SQL 语句
在CGridView里,有时候需要用到复杂的查询时,可用 CSqlDataProvider替换CActiveDataProvider, CSqlDataProvider 可用复杂的查询语句,例子如下: ...
- 章节十六、1-TestNG简介
一.TestNG 介绍 1.TestNG 是一个来自 JUnit 和 NUnit 的测试框架,它具拥有更多的功能,提高了 执行的效率. 2.TestNG 是一个开源的自动化测试框架 去除了老框架的大部 ...
- tensorflow学习笔记——多线程输入数据处理框架
之前我们学习使用TensorFlow对图像数据进行预处理的方法.虽然使用这些图像数据预处理的方法可以减少无关因素对图像识别模型效果的影响,但这些复杂的预处理过程也会减慢整个训练过程.为了避免图像预处理 ...
- php opcodes(vld)翻译教程
一.php opcodes的由来(如果你只想知道如何解php opcodes就直接跳过这步) 1.PHP内核-Zend引擎的详解:https://www.php.cn/php-weizijiaoche ...
- python编辑已存在的excel坑: BadZipFile: File is not a zip file
背景-原代码如下,期望能自动创建excel,并且可以反复调用编辑: import xlwt,osfrom openpyxl.styles import Font, colors class Write ...
- Mybatis框架(8)---Mybatis插件原理
Mybatis插件原理 在实际开发过程中,我们经常使用的Mybaits插件就是分页插件了,通过分页插件我们可以在不用写count语句和limit的情况下就可以获取分页后的数据,给我们开发带来很大 的便 ...
- Java面向对象特性总结
1.面对对象与面对过程的区别 什么是封装?我看到过这样一个例子: 我要用洗衣机洗衣服,只需要按一下开关和洗涤模式就可以了.有必要了解洗衣机内 部的结构吗?有必要碰电动机吗?有必要了解如何通电的吗? 如 ...