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)的更多相关文章

  1. Extjs4 使用store的post方法

    Extjs4 使用store的post方法 引用官网的一句话 Now when we call store.load(), the AjaxProxy springs into action, mak ...

  2. vue的常用组件方法应用

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

  3. Vue使用axios post方法发送json数据报415Unsupported Media Type

    1.Vue使用axios post方法发送json数据 <template> <el-aside> <el-form ref="form" :mode ...

  4. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  5. vue 2.0 vue.set的使用方法

    这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...

  6. iOS 或者Android调用vue.js 里面的方法

    1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...

  7. vue修改数组元素方法

    示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  8. vue 组件名和方法名 重名了,报function错误

    vue 组件名和方法名 重名了,报function错误

  9. VUE程序调试的方法

    目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...

随机推荐

  1. gitlab 备份和恢复

    前言 gitlab这个代码托管工具真是强大,很多东西都是做好了直接用的. 这里就包括备份和恢复功能. 正文 备份 我们可以直接运行此命令,来进行备份. sudo gitlab-rake gitlab: ...

  2. H5_0012:js事件冒泡和捕获

    捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于windo ...

  3. 二叉堆(1)BinaryHeap

    封装一个简单二叉堆,亦可视为优先队列. 测试文件 main.cpp: #include <iostream> #include "BinaryHeap.h" using ...

  4. jQuery---弹幕效果

    弹幕效果 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  5. harbor仓库部署时启用https时的常见错误KeyError: 'certificate'等

    出现 KeyError: 'certificate' 错误 先确认你的配置是否正确,例如harbor.yml里的https证书位置是否正确,证书是否正常无误 如果上述无误确反复报错,请确认你的harb ...

  6. python 方法和函数

    代码 def func(): pass class Foo(object): def func(self): pass # 执行方式一 # obj = Foo() # obj.func() # 方法 ...

  7. 假期学习【十一】Python爬取百度词条写入csv格式 python 2020.2.10

    今天主要完成了根据爬取的txt文档,从百度分类从信息科学类爬取百度词条信息,并写入CSV格式文件. txt格式文件如图: 为自己爬取内容分词后的结果. 代码如下: import requests fr ...

  8. npm命令笔记-----转自网络,仅供自己查看使用

    npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装 的包. npm常用指令 1.npm ...

  9. spring boot MySQL Public Key Retrieval is not allowed

    建议在链接url处添加对应的属性 jdbc:mysql://localhost:3306/book?allowPublicKeyRetrieval=true&useSSL=false 

  10. js 获取项目名称

    //获取项目名称function getWebName(){ var pathName = window.location.pathname.substring(1); var webName = p ...