1、安装vuex扩展 : npm install vuex

2、在componets目录下新建 store.js 文件

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) // 定义初始值
const state = {
num: 0
} // 获取变量值
const getters = {
num: state => state.num
} //定义触发状态对象方法,传入state整个对象
//在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值
const mutations = {
plus(state, num) {
state.num += num;
},
minus(state, num) {
state.num -= num;
}
} //异步执行方法,传入参数context,等同于整个store
//处理Mutations中已经写好的方法 在页面中触发方式是 this.$store.dispatch(actionName)
const actions = {
plus({commit}, num) {
// 调用mutations 方法
commit('plus', num)
},
minus({commit}, num) {
commit('minus', num)
}
} export default new Vuex.Store({
state,
mutations,
actions,
getters
}) /**
* 定义多个模块
* 定义一个模块,引入各个状态对象或方法
*/ // Const moduleA = {
// state,
// mutations,
// getters,
// actions
// } /**
* 引如多个模块
*/
// export default new Vuex.Store ({
// modules : {
// a : moduleA //引入定义模块
// }
// })

  属性值介绍:

  state:定义初始值

  getters:获取变量值

  mutations: 定义触发状态对象方法,传入state整个对象,在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值

  actions:异步执行方法,传入参数context,等同于整个store,处理Mutations中已经写好的方法 在页面中触发方式是 this.$store.dispatch(actionName)

3、在main.js 里添加引入store.js 代码

// 引入sotre.js
import store from './components/store.js' new Vue({
store,  // store对象
el: '#app',
router,
render: h => h(App)
});

4、新建 TestVuex.vue

<template>
<div class="testVuex">
<div>{{num}}</div>
<button @click="plus">加2</button>
<button @click="minus">加3</button>
</div> </template> <script> import {mapGetters} from 'vuex' export default {
name: 'testVuex',
//computed 实时计算 Vue检测到数据发生变动时就会执行对相应数据有引用的函数。
computed: {
...mapGetters([
'num' // store.js 里定义num值
])
},
methods:{
// 调用store.js 里actions定义的方法
plus:function() {
this.$store.dispatch('plus', 2);
},
minus:function() {
this.$store.dispatch('minus', 3);
}
},
data () {
return {
}
}
} </script>

5、效果预览

  

vuex 使用方法的更多相关文章

  1. vuex 引用方法

    引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 要注意的是 ...

  2. 浅谈vuex使用方法(vuex简单实用方法)

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...

  3. vuex使用方法

    vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.比如:我们有几个页面 ...

  4. Vuex 源码学习(一)

    (一)Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. —— 来自 V ...

  5. element-ui+vuex共享自定义方法进行表单验证 validator

    element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...

  6. Vuex笔记

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Vuex - 状态管理器,可以管理你的数据状态(类似于 React的 Redux) 一个 Vuex 应用的核心是 store(仓库,一个 ...

  7. vuex数据管理-数据共享

    应用场景 提供一个地址省市区地址联动操作的应用场景:在地址管理的地址修改.地址添加.选择送货区域等逻辑中,会用到该联动picker.在地址picker操作中,需要请求省份列表,下面以省份列表的操作为例 ...

  8. vuex实例详解

    vuex是一个专门为vue.js设计的集中式状态管理架构.状态?把它理解为在data中的属性需要共享给其他vue组件使用的部分. 简单的说就是data需要共用的属性 一.小demo 已经用Vue脚手架 ...

  9. 【21】vuex 与element iu表单校验

    转:http://www.cnblogs.com/gsgs/p/6753682.html element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方 ...

随机推荐

  1. hdu-5673 Robot(默次金数)

    题目链接: Robot Time Limit: 12000/6000 MS (Java/Others)  Memory Limit: 65536/65536 K (Java/Others) 问题描述 ...

  2. 「USACO06FEB」「LuoguP2858」奶牛零食Treats for the Cows(区间dp

    题目描述 FJ has purchased N (1 <= N <= 2000) yummy treats for the cows who get money for giving va ...

  3. NOIP2000提高组(RQNOJ314)方格取数

    题目描述 设有N*N的方格图(N<=10,我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样例): 某人从图的左上角的A 点出发,可以向下行走,也可以向右走,直到到达 ...

  4. saltstack api安装使用

    Salt自然也是提供api的,使用api对自动化有极大的帮助,我们使用rest风格的api,当然大家都知道salt是python写的,那么自然也就提供了对应的api,但是并不建议使用,因为调用pyth ...

  5. 屏蔽iframe中超链接

    <style type="text/css"> .mask { position: absolute; width: 290px; height: 96px; z-in ...

  6. cx_Oracle库导入失败引起crontab中python程序运行失败,并且无错误提示

    今天遇到一个问题: 一个python脚本命令行运行时很正常,放到crontab中就无法工作,日志也没有记录,找了半天,终于发现问题所在. 在脚本最上方,程序如下: #!/usr/local/bin p ...

  7. sass编译命令

    sass编译一个文件的方式 sass xx.scss:xx.css 这种方式只能编译一次,要是想一直监控编译,只要有保存更改就会立即编译,那么就需要下面这条命令了 sass --watch xx.sc ...

  8. Eigen中的noalias(): 解决矩阵运算的混淆问题

    作者:@houkai本文为作者原创,转载请注明出处:http://www.cnblogs.com/houkai/p/6349990.html 目录 混淆例子解决混淆问题混淆和component级的操作 ...

  9. MPTCP in Wireshark(转)

    最新的wireshark可以直接识别出mptcp. Wireshark is a widely used network analyzer that can capture network traff ...

  10. Flutter实战视频-移动电商-06.Dio基础_Get请求和动态组件协作

    博客地址: https://jspang.com/post/FlutterShop.html#toc-0ee 编写页面代码 创建动态组件HomePage,原来的代码是静态的我们这里就去掉就可以了. 然 ...