【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窗口 ...
随机推荐
- jQuery---突出展示案例
突出展示案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- Mysql快速入门(三)
MySQL性能优化之查看执行计划explain 介绍: (1).MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SELECT 执行的详细信息, 以供开发 ...
- 845. 八数码(bfs+map)
在一个3×3的网格中,1~8这8个数字和一个“X”恰好不重不漏地分布在这3×3的网格中. 例如: 1 2 3 X 4 6 7 5 8 在游戏过程中,可以把“X”与其上.下.左.右四个方向之一的数字交换 ...
- 假期学习【六】Python网络爬虫2020.2.4
今天通过Python网络爬虫视频复习了一下以前初学的网络爬虫,了解了网络爬虫的相关规范. 案例:京东的Robots协议 https://www.jd.com/robots.txt 说明可以爬虫的范围 ...
- EL表达式无法获取boolean类型变量值
今天调试个程序, 有个名为isAdmin的boolean类型的变量在jsp页面获取到的值为空, 这根本就是没获取到或者变量不存在的状况啊,但是在Action中明明是赋值成false了. 上网查了一下有 ...
- Appium+Python移动端(Android)自动化测试环境搭建
一.安装JDK 下载好jdk安装包后直接下一步直至安装完成即可,安装完JDK后配置环境变量 :计算机→属性→高级系统设置→高级→环境变量: 系统变量→新建 JAVA_HOME 变量 变量值填写jdk的 ...
- 占位 CP
占位 CP include: CP403 CP404 CP405
- jenkins Exec exit status not zero. Status [-1]
jenkins是使用ssh连接服务器后,如果使用grep获取进程并kill时,会jenkins Exec exit status not zero. Status [-1],解决办法:在获取进程时,使 ...
- redis相关问题记录
问题:无法在redis自行set操作 错误信息:(error) MISCONF Redis is configured to save RDB snapshots, but is currently ...
- Linux system 初步
快捷键: open a new terminal: ctrl+alt+T; close current terminal: ctrl+shift+W; switch windows: alt+tab ...