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. Wannafly Camp 2020 Day 3D 求和 - 莫比乌斯反演,整除分块,STL,杜教筛

    杜教筛求 \(\phi(n)\), \[ S(n)=n(n+1)/2-\sum_{d=2}^n S(\frac{n}{d}) \] 答案为 \[ \sum_{d=1}^n \phi(d) h(\fra ...

  2. StarUML 2下载、安装、破解全过程

      StarUML官方下载地址:  http://staruml.io/download 破解: ​  1.使用Editplus或者Notepad++等特殊的文本编辑器打开 安装位置下/www/lic ...

  3. Linux vim三种模式的快捷键

    1.移动光标 数字 + h,j,k,l 上,下,左,右 ctrl-e 移动页面 ctrl-f 上翻一页 ctrl-b 下翻一页 ctrl-u 上翻半页 ctrl-d 下翻半页 w 跳到下一个字首,按标 ...

  4. C# LINQ学习笔记五:LINQ to XML

    本笔记摘抄自:https://www.cnblogs.com/yaozhenfa/p/CSharp_Linq_For_Xml.html,记录一下学习过程以备后续查用. 一.生成xml 1.1创建简单的 ...

  5. mac屏幕录制

    屏幕录制 shift+command+5 录制完成后将文件拖拽到要保存的文件中

  6. Bootstrap资料

    Bootstrap手册  : https://www.jqhtml.com/bootstraps-syntaxhigh/index.html 中文文档 :https://v3.bootcss.com/ ...

  7. MapReduce自定义排序器不生效一个可能的原因

    有问题的代码: package com.mytq.weather; import org.apache.hadoop.io.WritableComparable; import org.apache. ...

  8. WSO2 ESB XML定义语法(2)

    5.Proxy Service 配置 <proxy>元素用于定义Synapse代理服务. 通过基础Axis2引擎在指定的传输上创建和公开代理服务,根据标准的Axis2约定(即基于服务名称) ...

  9. C++查看大端小端模式

    在学习计算机组成原理的时候,看到大端小端模式,便想实验一下,首先介绍一下 C 中的union,这个平时用得少,估计在单片机这种可能会运用,在平时写代码的时候几乎是用不着union的. union:联合 ...

  10. jfinal 拦截器中判断是否为pjax请求

    个人博客 地址:http://www.wenhaofan.com/article/20180926013919 public class PjaxInterceptor implements Inte ...