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. Linux 常用命令 服务器间scp 用户 export 创建文件、软连接

    获取外网ip curl icanhazip.com 服务器间的 文件 复制 scp root@ip:/源目录 目标目录 软连接 查看软连接 ls -li 创建软连接 ln -s 源文件 目标文件 -s ...

  2. 原生JS操作class 极致版

    // 获取class function getClass(el) { return el.getAttribute('class') } // 设置class function setClass(el ...

  3. Csla One or more properties are not registered for this type

    在实际运行中,好好运行的程序出现了以下问题: 2019-12-27 10:40:00,164 [DefaultQuartzScheduler_Worker-2] ERROR IBeam.BCPool. ...

  4. SpringBoot整合WEB开发--(八)启动任务系统

    简介: 有一些特殊的任务需要在系统启动时执行,例如配置文件的加载,数据库初始化等操作,如果没有使用SpringBoot,这些问题可以在Listener中解决.SpringBoot提供了两种解决方案:C ...

  5. maven配置文件pom.xml小记

    1.pom.xml主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以及其他所有的项目相关因素 2.基础设置: <modelV ...

  6. ZOJ1310-Robot (BFS)

    The Robot Moving Institute is using a robot in their local store to transport different items. Of co ...

  7. mysql 基础sql语法总结 (二)DML

    二.DML(增.删.改) 1)插入数据 第一种写法:INSERT INTO 表名 (列名1,列名2,,......)VALUES(列值1,列值2,......) 第二种写法:INSERT INTO 表 ...

  8. linux安装php-laravel环境

    1.运用传说中的宝塔面板安装(https://www.bt.cn/download/linux.html)网站地址 在xshell软件中安装一下命令 1.1 宝塔centos安装 wget -O in ...

  9. 完整安装IIS服务

    此文主要是针对前面提到的 IIS支持json.geojson文件 添加脚本映射时,提示找不到asp.dll时的解决方法. 主要参考了此文:http://www.kodyaz.com/articles/ ...

  10. WPF学习笔记五之MVVM

    1.概念 MVVM是Model-View-ViewModel的缩写形式,它通常被用于WPF或Silverlight开发.这三者之间的关系如下图所示 模型(Model) Model——可以理解为带有字段 ...