【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)
vue 页面文件
<template>
<div>
{{this.$store.state.count}}<br/>
{{count}}<br/>
{{this.$store.getters.changeCount}}<br/>
<el-button type="primary" @click="add">主要按钮</el-button>
</div>
</template> <script>
import {mapState} from 'vuex'
export default {
name: 'home',
computed: {
...mapState([
'count'
])
},
methods: {
add () {
this.$store.dispatch('addFun', 10) // actions
this.$store.commit('add',10) //mutations
}
},
mounted: {
}
}
</script> <style scoped> </style>
store文件
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
changeCount: state => {
return state.count + 1
}
},
mutations: {
add (state, n) {
state.count = state.count + n
}
},
actions: {
addFun (context, n) {
context.commit('add', n)
}
}
})
export default store
http://www.axios-js.com/zh-cn/docs/
【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)的更多相关文章
- Extjs4 使用store的post方法
Extjs4 使用store的post方法 引用官网的一句话 Now when we call store.load(), the AjaxProxy springs into action, mak ...
- vue的常用组件方法应用
项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...
- Vue使用axios post方法发送json数据报415Unsupported Media Type
1.Vue使用axios post方法发送json数据 <template> <el-aside> <el-form ref="form" :mode ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- vue 2.0 vue.set的使用方法
这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...
- iOS 或者Android调用vue.js 里面的方法
1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...
- vue修改数组元素方法
示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- vue 组件名和方法名 重名了,报function错误
vue 组件名和方法名 重名了,报function错误
- VUE程序调试的方法
目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...
随机推荐
- ELK学习实验015:日志的自定义index配置
前面使用json格式收集了nginx的日志,但是再index的显示是filebeat-*,现在使用自定义的index进行配置 但是再使用filebeat的7.4版本以后,有一个巨坑,就是按照网络的很多 ...
- jQuery---tab栏切换
tab栏切换 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 文本harry potter的字符统计
实现计算文件中字符的占比和不同单词的个数两项功能,首先将文本文件按行导入到程序中,再通过charAT()函数来实现对单个字符的操作,并用集合来统计字符总数以及不同的字符的个数,进而输出各个字符的个数以 ...
- [CF859C] Pie Rules - dp,博弈论
有一个长度为n的序列,Alice和Bob在玩游戏.Bob先手掌握决策权. 他们从左向右扫整个序列,在任意时刻,拥有决策权的人有如下两个选择: 将当前的数加到自己的得分中,并将决策权给对方,对方将获得下 ...
- Eclipse的使用配置
Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.目前许多开发者开发时仍会选择使用Eclipse,很多初学者刚开始接触Java也是从使用Eclipse开始的.本篇博客主要介绍Eclip ...
- webpack 之loader
webpack的作用: 是 用来处理我们写的js代码.并且会自动处理js之间相关的依赖. 但是,开发中我们不仅仅有基本的js代码处理,还需要加载css,图片,也包括一些高级的 将ES6转成ES5代 ...
- JS高级---递归
递归 递归: 函数中调用函数自己, 此时就是递归, 递归一定要有结束的条件 var i = 0; function f1() { i++; if (i < 5) { f1(); } cons ...
- JDBC获取超出最大连接的连接池对象
- Java 面向对象编程 抽象类 抽象方法 abstract
抽象类 通过abstract定义的方法是抽象方法,它只有定义,没有实现.抽象方法定义了子类必须实现的接口规范: 定义了抽象方法的class必须被定义为抽象类,从抽象类继承的子类必须实现抽象方法: 如果 ...
- Runtime.getRuntime.exec()执行linux脚本导致程序卡死有关问题
Runtime.getRuntime.exec()执行linux脚本导致程序卡死问题问题: 在Java程序中,通过Runtime.getRuntime().exec()执行一个Linux脚本导致程序被 ...