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. 用 ArcMap 发布 ArcGIS Server Feature Server Feature Access 服务

    1. 安装Desktop, 2. 安装ArcGIS Server 3. 安装PostgreSQL 9.5 从 C:\Program Files (x86)\ArcGIS\Desktop10.5\Dat ...

  2. vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法

    最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...

  3. python笔记07

    今日内容 深浅拷贝(面试) 文件操作 今日内容 深浅拷贝 v1=[1,2,[34,67,9]] import copy 浅拷贝: 拷贝第一层 v2=copy(v1)---将v1的地址copy,最外层壳 ...

  4. [Python]find_all函数 2020.2.7

    .find_all(name,attrs,recursive,string,**kwargs) name:对标签名称的检索字符串attrs:对标签属性值的检索字符串,可标注属性检索recursive: ...

  5. pytest学习8-运行上次执行失败的用例

    该插件提供了两个命令行选项,用于重新运行上次pytest调用的失败: --lf,--last-failed- 只重新运行上次失败的用例,如果没有失败则全部运行 --ff,--failed-first- ...

  6. [TJOI2013] 攻击装置 - 二分图匹配

    给定 \(N \times N\) 棋盘,某些格子是障碍,问可以放置的互不侵犯的马的个数 黑白染色后建立二分图,求最大独立集 = 总点数 - 最大匹配数 注意把反边也连上会WA掉(脑抽一发血) #in ...

  7. Spring-session+Redis解决Session共享

    1. 保证Redis启动           2. 导入依赖                SpringBoot+Spring-Session+Redis <!--spring boot 与re ...

  8. 让Surface Shader不受光照的明暗影响

    直接上码 Shader "Custom/3DVideo" { Properties { _Color (,,,) _MainTex ("Albedo (RGB)" ...

  9. JS的冒泡事件

      在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的 ...

  10. arm-linux-gcc

    搭建交叉编译环境,即安装.配置交叉编译工具链.在Ubuntu环境下编译出嵌入式Linux系统所需的操作系统.应用程序等,然后再上传到目标机上. 交叉编译工具链是为了编译.链接.处理和调试跨平台体系结构 ...