自己在使用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. HardFault_Handler 输出日志信息

    之前文章说了原理,这里把最终实现的代码总结: IAR void hard_fault_handler_c (unsigned int * hardfault_args) { unsigned int ...

  2. GDI+ 加载PNG图片

    #include <GdiPlus.h>#pragma comment(lib, "GdiPlus.lib")using namespace Gdiplus; clas ...

  3. C# System.IO 文件流输入输出

    一.读写文本文件 可以用fileStream来读写文本文件,但是FileStream是通过字节形式来读写数据的,要把字节数据转换为文本,要自己处理编码转换. 对于文本文件的读写,通常用 StreamR ...

  4. egrep命令的实现 分类: 编译原理 2014-06-01 23:41 329人阅读 评论(0) 收藏

    本程序实现了egrep命令,首先将正则表达式转换为NFA,并实现模拟NFA的算法. 本程序使用flex实现词法分析,bison实现语法分析 若给定的一行字符串中存在一个字串能被该NFA接受,则输出整行 ...

  5. 浏览器 cookie session

    浏览器的cookie被禁用的话,则服务端的session不起作用 session是基于cookie实现的, 还是办理会员卡的问题, cookie客户端支持,即客户手上的会员卡记录了所有信息, sess ...

  6. Windows API函数大全一

    1. API之网络函数             WNetAddConnection 创建同一个网络资源的永久性连接             WNetAddConnection2 创建同一个网络资源的连 ...

  7. AJPFX理解反射及反射的应用

    怎么理解反射,反射的应用        反射就是把Java类中的各种成分映射成相应的Java类.        一般情况下我们要解决某个问题,先找到相关的类,创建该类的对象,然后通过该对象调用对应的方 ...

  8. 文件及文件的操作-读、写、追加的t和b模式

    1.什么是文件? 文件是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位. 文件的操作核心:读和写 对文件进行读写操作就是向操作系统发出指令,操作系统将用户或者应用程序对文件的读写操作转换为具体的 ...

  9. poj2991 Crane

    思路: 线段树每个节点维护第一条线段起点指向最后一条线段终点的向量,于是每一个操作都是一次区间更新.使用成段更新的线段树即可.实现: #include <cstdio> #include ...

  10. 如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret。

    如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret. 申请流程如下: 步骤1:登陆腾讯开放平台.链接地址: http://open.qq.com/ . 步骤2:填 ...