对vuex的浅解
vuex是什么?
官网的解释是
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools,extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
而就我浅显的理解是
它类似一个html里面的全局变量,可运用于全局,而vue存储的东西,可以运用于vue所有的组件,方便与组件里面数据的接受与监听。
vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】
安装
npm install vuex --save
在main.js中 引入
//main.js import Vuex from 'vuex'; Vue.use(Vuex); //创建一个store以便于在所有组件都能查询到vuex的数据 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }); //简单测试 //store.commit('increment') //console.log(store.state.count); //在vue实例中引用
export default new Vue({ el: '#app', store, components: { App }, template: '<App/>' });
vuex核心概念的使用
//main.js const store = new Vuex.Store({ //数据存储的字段 state: { count: 0 }, //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 mutations: { increment (state,value) { state.count+=value } }, //可以理解为一个动作,它提交的是 mutation,而不是直接变更状态。 actions: { increment (context,value) { context.commit('increment',value) } }, //将数据返回出去,以便于组件中拿到count值 getters:{ getCounts:state =>state.count } });
//新建一个组件,假设命名为testDemo.vue <template> <div> {{counts}} </div> </template> <script> export default { name: 'testDemo', data () { return { } }, computed:{ //通过计算属性监听vuex里面 count的值 counts(){ return this.$store.getters.getCounts; } }, created(){ setTimeout(()=>{ //action 方法提交 this.$store.dispatch('increment',10) },2000) } } </script>
随后,可以将store在main.js中处理出来,src目录下新建一个文件夹命名为store,新建index.js,actions.js,getters.js,mutation-types.js,mutations.js
//index.js import Vue from 'vue'; import Vuex from 'vuex'; import mutations from './mutations'; import actions from './actions'; import getters from './getters'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { count: 1, }, mutations, actions, getters }); // mutation-types.js export const INCREMENT="INCREMENT";
19
// action.js import { INCREMENT } from './mutation-types'; export default { [INCREMENT]({ commit, state },value) { commit(INCREMENT,value); }, }; // mutations.js import {
testDemo.vue
<template> <div> {{counts}} </div> </template> <script> export default { name: 'testDemo', data () { return { } }, computed:{ //通过计算属性监听vuex里面 count的值 counts(){ return this.$store.getters['INCREMENT']; } }, created(){ setTimeout(()=>{ //action 方法提交 this.$store.dispatch('INCREMENT',10) },2000) } } </script>
这样以来,逼格就立马高了一些
最后,文件的目录大概就长下图这个样子
对vuex的浅解的更多相关文章
- 从最大似然到EM算法浅解
从最大似然到EM算法浅解 zouxy09@qq.com http://blog.csdn.net/zouxy09 机器学习十大算法之中的一个:EM算法.能评得上十大之中的一个,让人听起来认为挺NB的. ...
- 面试-1-C#浅解
面试-1 C#浅解众所周知c#是微软推出的一款完全没面向对象的编程语言,那么对象是什么?在现实生活中人们一提到对象首先想到的就是“情侣”!但是在我们的程序中对象是什么? 在程序中个能够区别于其他事 ...
- GIS历史概述与WebGis应用开发技术浅解
声明:本篇在李晓晖的<杂谈WebGIS>,补充更多的资料说明.基于地图二次开发一直断断续续在做,这里算是补充一下基本功把.其实对于前端,WebGis开发都是api,抄demo,改.GIS深 ...
- List根据某字段去重,以及compareTo 浅解
原文链接:https://blog.csdn.net/qq_35788725/article/details/82259013 Collections.sort可对集合进行排序 根据List里面某个字 ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
- vuex基础详解
vuex入门 安装 vuex为我们提供了两种使用方法 直接引入 vuex下载地址:https://unpkg.com/vuex@2.0.0 下载之后用< script >标签包裹引入即可 ...
- JVM中GC浅解:垃圾回收的了解
1.为什么要有GC 没有GC的世界,我们需要手动进行内存管理,但是内存管理是纯技术活,又容易出错.但是我们写码的目的是为了解决业务问题,所以可以把这种纯技术活自动化,当然自动化也是有代价的. 2.垃圾 ...
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...
- Rest_framework Serializer 序列化 (含源码浅解序列化过程)
目录 Rest_framework Serializer 序列化 序列化与反序列化中不得不说的感情纠葛 三角恋之 save/update/create 四角恋之 序列化参数instance/data/ ...
随机推荐
- 通过代码获取log4net的文件路径
http://stackoverflow.com/questions/1343749/get-log4net-log-file-in-c-sharp Solution is quite easy in ...
- poj2104 k-th number 主席树入门讲解
poj2104 k-th number 主席树入门讲解 定义:主席树是一种可持久化的线段树 又叫函数式线段树 刚开始学是不是觉得很蒙逼啊 其实我也是 主席树说简单了 就是 保留你每一步操作完成之后 ...
- java使用poi读取word(简单,简约,直观)
java使用poi读取word(简单,简约,直观) 说明 其实poi的官网上面都是有接口和样例的,只是都是英文 例如网址:http://poi.apache.org/spreadsheet/quick ...
- Luogu1275魔板
https://zybuluo.com/ysner/note/1136271 题面 有这样一种魔板:它是一个长方形的面板,被划分成\(n\)行\(m\)列的\(n*m\)个方格.每个方格内有一个小灯泡 ...
- openstack Aio env deubg
- eclipse ------validation功能
今天来讲讲eclipse 的validation功能,该功能用于检测代码存在的“潜在”问题,比如:JSP文件的语法错误,XML中的schema错误等,这么好的功能还有什么可讲的呢,我今天要讲的是val ...
- Dsp和ARM的区别
有一次上课老师在将ARM的时候说到了Dsp. Dsp(Digital Signal Process),数字信号处理技术,而Dsp芯片和ARM的结构也有很多相似之处.比如有流水线.采用哈佛结构(早期的A ...
- python抢票开发——设备预约助手实现
女朋友是药学院的,做实验时需要在特定的网站上进行设备预约,由于预约人数过多,从而导致从浏览器登录不进去或者登录进去预约失败等情况,所以我用python帮她写了一个抢位助手,让程序自动去进行位置预定,实 ...
- 【POJ1845】Sumdiv(数论/约数和定理/等比数列二分求和)
题目: POJ1845 分析: 首先用线性筛把\(A\)分解质因数,得到: \[A=p_1^{a_1}*p_2^{a_2}...*p_n^{a_n} (p_i是质数且a_i>0) \] 则显然\ ...
- C#模拟百度登录并到指定网站评论回帖(二)
序言: 回归正题:前面讲到的抓包分析的数据,是模拟登录要获得得必要信息(当然有些也不是必要的...我只是都列举出来这样有个对比)如果说,有哪个英文字母不知道什么意思的,可以问一下度娘,有不少前辈都发过 ...