【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窗口 ...
随机推荐
- gitlab 备份和恢复
前言 gitlab这个代码托管工具真是强大,很多东西都是做好了直接用的. 这里就包括备份和恢复功能. 正文 备份 我们可以直接运行此命令,来进行备份. sudo gitlab-rake gitlab: ...
- H5_0012:js事件冒泡和捕获
捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于windo ...
- 二叉堆(1)BinaryHeap
封装一个简单二叉堆,亦可视为优先队列. 测试文件 main.cpp: #include <iostream> #include "BinaryHeap.h" using ...
- jQuery---弹幕效果
弹幕效果 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- harbor仓库部署时启用https时的常见错误KeyError: 'certificate'等
出现 KeyError: 'certificate' 错误 先确认你的配置是否正确,例如harbor.yml里的https证书位置是否正确,证书是否正常无误 如果上述无误确反复报错,请确认你的harb ...
- python 方法和函数
代码 def func(): pass class Foo(object): def func(self): pass # 执行方式一 # obj = Foo() # obj.func() # 方法 ...
- 假期学习【十一】Python爬取百度词条写入csv格式 python 2020.2.10
今天主要完成了根据爬取的txt文档,从百度分类从信息科学类爬取百度词条信息,并写入CSV格式文件. txt格式文件如图: 为自己爬取内容分词后的结果. 代码如下: import requests fr ...
- npm命令笔记-----转自网络,仅供自己查看使用
npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装 的包. npm常用指令 1.npm ...
- spring boot MySQL Public Key Retrieval is not allowed
建议在链接url处添加对应的属性 jdbc:mysql://localhost:3306/book?allowPublicKeyRetrieval=true&useSSL=false
- js 获取项目名称
//获取项目名称function getWebName(){ var pathName = window.location.pathname.substring(1); var webName = p ...