自己在使用vue练习开发的时候遇到全局变量无法即时更新的问题,查了资料之后得出结论使用vuex能够快速解决该问题,但是看了好多人讲解vuex的教程自己跟着去做都没解决自己想要的,最后找到一个比较容易理解的拿出来分享给大家,也顺便给自己做笔记了。

1.首先安装vuex  cnpm install vue --save

2.引入vuex  import Vuex from 'vuex';

3.只需要复制粘贴过去即可(最重要的别忘了需要初始化的时候把store写进去

new Vue({
el: '#app',
router,
store,//使用store
components: { App },
template: '<App/>'
})

//创建Store实例
const store = new Vuex.Store({
// 存储状态值
state: {
count: 1,
flag:true
},
// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
mutations: {
increment (state) {
state.flag = !state.flag;
// 变更状态
state.count++
}
},
// 在store中定义getters(可以认为是store的计算属性)。Getters接收state作为其第一个函数
getters: {
done(state) {
return state.count + 5;
},
},
actions: {
increment (context) {

context.commit('increment')
},
incrementAsync (context) {

// 延时1秒
setTimeout(() => {

context.commit('increment')
}, 1000)
}

}
})
// 要改变状态值只能通过提交mutations来完成

4.通过$store.state.flag方式来获取或操作自己需要管理的数据

如果大家有更好的方法或见解希望互相交流

vuex如何管理需要即时更新的全局变量的更多相关文章

  1. vuex状态管理工具

    父子组件之间的通信  props传递  父 向子单向传递:且每次 父组件更新时  子组件的props会跟着更新: 如果需要 子组件把数据传递给父组件,就需要在子组件上绑定自定事件 在子组件使用this ...

  2. vuex状态管理之学习笔记

    概述及使用场景 Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 但如果是简单的应用 ,就没有必 ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. Vuex状态管理详解

    什么是Vuex 专门为vue应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态(数据),以相应的规则保证状态以一种可预测的方式发生改变 Vuex的作用(什么样的情况下使用Vuex) 多 ...

  5. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

  6. 使用vuex来管理数据

    最近一直工作比较忙,博客已经鸽了好久了,趁着今天是周末,写点东西吧 使用vuex来管理数据 最近一直在用vue做项目,但是却从来没真正去用过vuex,因为一直感觉很复杂,其实真正去研究一下啊,就会发现 ...

  7. Vuex 状态管理的工作原理

    Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...

  8. Linux内存管理 (20)最新更新和展望

    专题:Linux内存管理专题 关键词:OOM.swap.HMM.LRU. 本系列没有提到的内容由THP(Transparent Huge Page).memory cgroup.slub.CMA.zr ...

  9. vuex状态管理-数据改变不刷新

    困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...

随机推荐

  1. cmath函数整理

    double a= pow(double x, double y)://返回x的y次方. double a= sqrt(double x)://返回x的平方根. double a=ceil(doubl ...

  2. 一个简单的Viewport效果

    <script src="../ext-4.2/bootstrap.js" type="text/javascript"></script&g ...

  3. Python数据存储 — MySQL数据库操作

    本地安装MySQL 调试环境python3.6,调试python操作mysql数据库,首先要在本地或服务器安装mysql数据库. 安装参考:https://mp.csdn.net/postedit/8 ...

  4. bzoj 3028: 食物【生成函数】

    承德汉堡:\( 1+x^2+x^4+...=\frac{1}{1-x^2} \) 可乐:\(1+x \) 鸡腿:\( 1+x+x^2=\frac{x^3-1}{x-1} \) 蜜桃多:\( x+x^3 ...

  5. 洛谷P4114 Qtree1(树链剖分+线段树)

    传送门 LCT秒天秒地用什么树剖 这题可以算是树剖的比较裸的题目了 把每一条边的权值下放到他两边的点中深度较深的那个 然后直接用树剖+线段树带进去乱搞就可以了 //minamoto #include& ...

  6. 初窥MySQL性能调优

    本文涉及:MySQL自带的性能测试工具mysqlslap的使用及几个性能调优的方法 性能测试工具—mysqlslap mysqlslap是MySQL自带的一款非常优秀的性能测试工具.使用它可以 模拟多 ...

  7. c语言中的rand()函数用法

    rand() rand()函数作用:用来产生随机数,但是,rand()的内部实现是用线性同余法实现的,是伪随机数,由于周期较长,因此在一定范围内可以看成是随机的. rand()函数返回:返回一个范围在 ...

  8. windows 下使用命令行操作ftp

    open 192.168.10.6     (连接到FTP主机) User allan\ftp            (用户连接验证,注意这里的用户用到的是FTP服务器端创建的用户名) 123     ...

  9. [ZPG TEST 108] blockenemy【树形dp】

    T3:blockenemy blockenemy.pas/in/out 128M 1s 你在玩电子游戏的时候遇到了麻烦...... 你玩的游戏是在一个虚拟的城市里进行,这个城市里有n个点,都从0~n- ...

  10. 【图片匹配】--- SIFT_Opencv3.1.0_C++_ubuntu

    最近在捣鼓图片相似性匹配算法.这里先说一点必要的题外话: 如果是在同一个object不同角度拍摄的多张图片中,使用SIFT可以有不错的效果: 如果是寻找类别相同的图片(可能不是同一object),SI ...