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. Spring MVC 注解开发详解

    @Controller控制器定义 1.Controller是单利模式,被多个线程请求共享,因此设计成无序状态. 2.通过@controller标注即可将class定义为一个controller类.为使 ...

  2. [调试AvantCourier的笔记]

    1.manifest里不能设置target sdk 不然会出现stale error. 2.manifest里要有Internet权限 3

  3. Hihocder 1639 : 图书馆 (组合数+唯一分解 求最后一位)(妙)

    给定n,(n<=10^3),然后输入n的数a[i],(a[i]<=1e10),求ans=(a1+a2+a3...an)! / (a1!*a2!*a3!...an!) 的结果的最一位数. 适 ...

  4. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  5. 内存泄漏分析工具tMemMonitor (TMM)使用简介

    C/C++由于灵活.高效的优点一直以来都是主流的程序设计语言之一,但是其内存的分配与释放均由程序员自己管理,当由于疏忽或错误造成程序未能释放不再使用的内存时就会造成内存泄漏.在大型.复杂的应用程序中, ...

  6. .NETFramework:Thread

    ylbtech-.NETFramework:Thread 1.返回顶部 1. #region 程序集 mscorlib, Version=2.0.0.0, Culture=neutral, Publi ...

  7. 2.11-2.12 HBase的数据迁移常见方式

    一.importtsv 把hdfs中数据抽取到HBase表中: 1.准备数据 ##student.tsv [root@hadoop-senior datas]# cat student.tsv 100 ...

  8. 技术胖Flutter第四季-22页面跳转并返回数据

    视频地址: https://www.bilibili.com/video/av35800108/?p=23 博客地址: https://jspang.com/post/flutter4.html#to ...

  9. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

  10. Flutter实战视频-移动电商-39.路由_Fluro的路由配置和静态化

    39.路由_Fluro的路由配置和静态化 handler只是单个路由的配置,这节课我们要学习路由的整体配置 整体配置 新建routers.dart文件来做整体配置 detailsHandler就是我们 ...