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. ASP.NET常用内置对象(一)Request

    用来获取客户端在请求一个页面或传送一个Form是提供的所有信息.它包括用户的HTTP变量.能够识别的浏览器信息.存储客户端的Cookie信息和请求地址等. Request对象是System.Web.H ...

  2. window - 安装 tomcat

    一.下载安装包 参考网址:https://archive.apache.org/dist/tomcat 百度网盘:https://pan.baidu.com/s/1mtNuTUCFp-_SIHIp_R ...

  3. 工作问题--------爬虫遇到requests.exceptions.ConnectionError: HTTPSConnectionPool Max retries exceeded

    问题描述:爬取京东的网站,爬取一段时间后报错. 经过一番查询,发现该错误是因为如下: http的连接数超过最大限制,默认的情况下连接是Keep-alive的,所以这就导致了服务器保持了太多连接而不能再 ...

  4. 点击按钮出现60秒倒计时,JS(按钮)

    <script type="text/javascript"> var countdown=60; function settime(val) { var e = $( ...

  5. ST表求区间最值

    #include<bits/stdc++.h> #define ll long long #define lowbit(x) x&-x using namespace std; ; ...

  6. 莫凡_linux

    1.安装软件 2.基本命令ls和cd cd 指令 第一个要知道的指令就是怎么样去到你想去的地方. cd (Change Directory) 就是干这个的. 找到 Linux 的 terminal 窗 ...

  7. Jmeter-文件目录

    Jmeter文件目录介绍 1.bin:可执行文件目录 (1)jmeter.bat:windows的启动文件 (2)jmeter.log:日志文件 (3)jmeter.sh:linux的启动文件 (4) ...

  8. jave的安装

    1.此电脑-属性-高级系统设置-环境变量2.点下面那个 新建-  JAVA_HOME3. 双击PATH变量,新建一个参数 4.新建CLASSPATH环境变量

  9. OpenCV中imread失败cvLoadImage成功

    MYLAF 环境说明 编程环境:Windows 10(64bit), VS2013, OpenCV 2.4.12; 编程语言:C/C++: MYLAF 现象 在代码中,调用imread读取图片失败,但 ...

  10. dgango 反射

    相关 """ 反射 由字符串反向找 变量.函数.类 """ import sys class Person(object): def __i ...