【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窗口 ...
随机推荐
- nodejs安装管理工具nvm的安装和使用
https://segmentfault.com/a/1190000007612011 Windows下载安装程序安装过程中,在 Set Node.js Symlink 这一步设置nodejs程序目录 ...
- php函数的巧妙应用
直接切入正题: 1.extract();函数从数组中把变量导入到当前的符号表中 对于数组中的每个元素,键名用于变量名,键值用于变量值. 第二个参数 type 用于指定当某个变量已经存在,而数组中又有同 ...
- 在linux中安装nginx
linux系统安装在vmware中,首先在主机中利用shell工具与虚拟机连接 1.在linux中查看虚拟机的ip地址 在终端输入 ifconfig 红框里面就是ip地址 2.在主机中打开shell工 ...
- 4P遇上了5P
(1)4P工作要素:任何一位从业者,都应该好好想想自己工作的初衷是什么?你将自己所从事的工作又是定位在什么位置?而这份工作的视角又有多宽.多广?最后是你会在某个周期内完成工作或者是实现突破. (2)5 ...
- UVa - 12050 Palindrome Numbers (二分)
Solve the equation: p ∗ e −x + q ∗ sin(x) + r ∗ cos(x) + s ∗ tan(x) + t ∗ x 2 + u = 0 where 0 ≤ x ≤ ...
- mybatis一级缓存和二级缓存(三)
缓存详细介绍,结果集展示 https://blog.csdn.net/u013036274/article/details/55815104 配置信息 http://www.pianshen.co ...
- navicat连接mysql8.0+版本报错2059
ERROR 2059 : Authentication plugin 'caching_sha2_password' cannot be loaded 问题: 连接Docker启动的mysql出现:E ...
- Java基本语法--运算符
运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等.本篇博客详细介绍Java基本语法中的运算符,主要包括算术运算符.赋值运算符.比较运算符(关系运算符).逻辑运算符.位运算符.三元运算符. Ja ...
- tcp与http协议 以及python的实现
htpp协议 Rquest Headers格式: 请求方法空格URL空格协议版本回车符换行符 头部字段名:值回车符换行符 ··· 头部字段名:值回车符换行符 回车符换行符 请求数据 socket网络聊 ...
- Chrome 提标 您的浏览器限制了第三方Cookie...解决方法
最近升级Chrome后会出现 您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试. 解决方法: chrome://flags/ 把这句复制到浏览器回车 ...