【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窗口 ...
随机推荐
- Selenium3+python自动化016-多线程
1.进程 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基 ...
- 【并发那些事】线程有序化神器CompletionService
前言 话说有一天,产品经理突然找到正在摸鱼的你. 产品:『我们要加一个聚合搜索功能,当用户在我们网站查询一件商品时,我们分别从 A.B.C 三个网站上查询这个信息,然后再把得到的结果返回给用户』 你: ...
- ssh配置跳板机-带密钥
ssh配置跳板机堡垒机带密钥 ~/.ssh/config 添加以下配置: # 跳板机地址 Host jumper HostName jumper.com User jumper port 23333 ...
- 前端:将网站打造成单页面应用SPA
前端:将网站打造成单页面应用SPA 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...
- Wannafly Camp 2020 Day 6I 你吓到我的马了.jpg - BFS
暴力BFS即可 #include <bits/stdc++.h> using namespace std; int n,m,f[105][105]; char s[105][105]; s ...
- 解决myeclipse2017ci7破解后闪退问题
解决myeclipse2017ci7破解后闪退问题 打开myeclipse.ini修改为: #utf8 (do not remove)-startupplugins/org.eclipse.equin ...
- Hbase javaAPI(工具类)表的增删改查
建立连接: package Init; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.*; i ...
- C#简单鼠标键盘钩子KMHook
简介:由三个文件构成Pinvo.cs.KeyboardHook.cs.MouseHook.cs Pinvo.cs 是KeyboardHook与MouseHook需要的一些常量消息的定义 Keyboar ...
- pandas处理csv,分组统计
需求: /tmp/demo/data下有10个csv文件,按col0和col1分组分别统计col2和col3总和并计算col2和col3的商 # encoding:utf-8 import panda ...
- opencv 实现人脸检测(harr特征)
我这里用的是已经训练好的haar级联分类器. 眼睛检测 haarcascade_eye_tree_eyeglasses.xml 人脸检测 haarcascade_frontalface_alt2.xm ...