【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窗口 ...
随机推荐
- Codeforces Round #622 (Div. 2).C2 - Skyscrapers (hard version)
第二次写题解,请多多指教! http://codeforces.com/contest/1313/problem/C2 题目链接 不同于简单版本的暴力法,这个数据范围扩充到了五十万.所以考虑用单调栈的 ...
- python3包、模块、类、方法的认识
包>>模块>>类>> 函数 包:就是一个目录,import time from+import导入包中的部分模块 直接到类 from budaoguan.common ...
- python3练习100题——045
题目:统计 1 到 100 之和. sum(range(1,101)) 题目太容易了,我都不想用迭代浪费时间. 觉得这100道题难度设计越来越不合理.
- CentOS MySQL自动备份shell脚本
先执行 vim/mysqlBack/back.sh 然后添加以下内容 ## 记录日志 # 以下配置信息请自己修改 mysql_user="root" #MySQL备份用户 mys ...
- python 轮询,长轮询
轮询相关 用于消息和投票等 轮询 1.采用js 定时请求. html <!DOCTYPE html> <html lang="zh-CN"> <hea ...
- 野路子码农(5)Python中的装饰器,可能是最通俗的解说
装饰器这个名词一听就充满了高级感,而且很多情况下确实也不常用.但装饰器有装饰器的好处,至少了解这个对装逼还是颇有益处的.网上有很多关于装饰器的解说,但通常都太过“循序渐进”,有的还会讲一些“闭包”之类 ...
- vs code使用指南
https://blog.csdn.net/weixin_45601379/article/details/100550421
- vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?
1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...
- python面试的100题(15)
41.super函数的具体用法和场景 为了调用父类(超类)的一个方法,可以使用 super() 函数,比如: class A: def spam(self): print('A.spam') clas ...
- Go源码文件与命令
Go源码文件 文件类型 命令源码文件 : 声明自己属于main包且包含main函数的源码文件,一个包里边不要有多个命令源码文件,虽然用go install ,go run单独执行命令源码文件没有问题, ...