src/vuex/store.js

组件里面使用引入store.js,注意路径

import store from 'store.js'

然后在使用的组件内data(){}同级放入store

三大常用的方法state,mutations,getters

重要的一步,当把state,mutation,getter写完之后,需要向外暴露接口

const store=new Vuex.Store({
state,

mutations,
getters
})

export default store

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

//管理的数据,存储起来

var state={
num:1
}

若外边的组件想用这个值,this.$store.state.num

方法,可以在组件里面事件引用

var mutations={
inc:function(){
++state.num
}
}

例如 <button @click="changeState"></button>,用组件里的事件映射store里面的事件

changeNum:function(){
this.$store.commit('inc')
}

getters方法类似于mounted计算属性

var getters={
computedNum:function(state){
return state.num*2
}
}

组件里面的视图更新执行方法

{{this.$store.getters.computedNum}}

最后,分清他们的用途,就可以愉快使用vuex了

使用vuex管理数据的更多相关文章

  1. 使用vuex来管理数据

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

  2. 关于vuex的数据不直接给data而要通过computed

    # 为什么vuex的数据不直接给data而要通过computed计算 ## 疑惑 其实一直以来使用vue的状态管理vuex都有一个疑惑,文档中介绍,vue的状态数据`$store.state.xx`的 ...

  3. OCA读书笔记(9) - 管理数据同步

    9.Managing Data Concurrency 描述锁机制以及oracle如何管理数据一致性监控和解决锁冲突 管理数据的并发--管理锁数据的不一致:脏读更改丢失幻影读 脏读:数据是指事务T2修 ...

  4. docker中管理数据

    到目前我们介绍了一些Docker的基础概念, 知道了如何使用Docker的image, 也知道了如何在多个container间通过网络通讯. 在这章里我们将介绍如何在docker的container内 ...

  5. 为什么Vuex内数据改变了而组件没有进行更新?

    这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料.终于找出了问题所在 Vuex的数据写在store里,在组件中需要用到this.$store.commit() 来 ...

  6. sqoop上传数据到hdfs,并用hive管理数据。

    sqoop导入mysql数据表到HDFS中sqoop import --connect jdbc:mysql://master:3306/test --username root --password ...

  7. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  8. 简述vuex的数据传递流程

    简述vuex的数据传递流程 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法.actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过comm ...

  9. Windows Server 2008利用NTFS管理数据

    今天我们学习关于NTFS管理数据 以下是学习的内容NTFS分区和FAT32分区的区别,如何将FAT32分区转化成NTFS分区,FAT 32 不支持大于4G ,NTFS权限设置 ,EFS加密 ,文件夹的 ...

随机推荐

  1. 卡特兰数&错排&一个一直记不住的公式

    卡特兰数 公式:f(x)=f(2)*f(x-1)+f(3)*f(x-2)+......+f(x-1)*f(2) #include<iostream>#include<cstdlib& ...

  2. java多线程有几种实现方法,都是什么?

    转自:http://www.cnblogs.com/liujichang/p/3150387.html 多线程有两种实现方法,分别是继承Thread类与实现Runnable接口 同步的实现方法有两种, ...

  3. 1.Windows入侵排查思路

    0x00 前言 当企业发生黑客入侵.系统崩溃或其它影响业务正常运行的安全事件时,急需第一时间进行处理,使企业的网络信息系统在最短时间内恢复正常工作,进一步查找入侵来源,还原入侵事故过程,同时给出解决方 ...

  4. UT源码116

    2)NextDate函数问题 NextDate函数说明一种复杂的关系,即输入变量之间逻辑关系的复杂性 NextDate函数包含三个变量month.day和year,函数的输出为输入日期后一天的日期. ...

  5. C++多线程框架

    Thread线程框架 线程定义:线程可以理解为一个特立独行的函数.其存在的意义,就是并行,避免了主线程的阻塞. ----------------------------thread与函数------- ...

  6. Haproxy+Keepalived高可用配置

    基本实验 参考文档 博文地址 环境拓扑 下面使我们要实现的负载均衡集群图示 主节点地址: 92.0.0.11 从节点地址: 92.0.0.12 共享虚拟地址:92.0.0.8 下面是负载均衡集群可能出 ...

  7. Delphi Runtime Library在哪里?

    Delphi Runtime Library是Delphi的运行时库,里面包含了大部分Delphi库的代码,这些库代码在哪里呢?其实正常安装完Dephi之后,在它的安装目录下面!下面我以我的Delph ...

  8. hdu6069(简单数学+区间素数筛法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6069 题意: 给出 l, r, k.求:(lambda d(i^k))mod998244353,其中 ...

  9. 关于特殊目录如com null无法删除的处理办法

    1.把以下批处理做成一个del.bat放在桌面 del /f /a /q \\?\%1 rd /s /q \\?\%1 2.需要删除的文件或者文件夹拉到这个文件上就可以了 可以删除没有属性项目中没有安 ...

  10. 洛谷P2911 [USACO08OCT]牛骨头Bovine Bones【水题】

    题目大意:输入S1,S2,S3,随机生成三个数x,y,z,求x+y+z出现次数最多的数(如果有多个答案输出最小的),其中1<=x<=S1,1<=y<=S2,1<=z< ...