对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/ ...
随机推荐
- c++中读写文件操作
读写文件这个,不常用,每次用的时候都会百度一下,每次写法还都不一样,所有总是记混.今天利用点时间总结下之前工程中用过的.以后就安照这种方法写了. 搞acmicpc的时候喜欢用freopen(),这个是 ...
- 【Codevs1322】单词矩阵
Position: http://codevs.cn/problem/1322/ List Codevs1322 单词矩阵 List Description Input Output Sample I ...
- 【POJ 2965】 The Pilots Brothers' refrigerator
[题目链接] http://poj.org/problem?id=2965 [算法] 位运算 [代码] #include <algorithm> #include <bitset&g ...
- 【POJ 1328】 Radar Installation
[题目链接] http://poj.org/problem?id=1328 [算法] 每个雷达都位于笛卡尔坐标系的x轴上,因此,对于每个岛屿,我们都可以用勾股定理算出它的有效管辖区域 那么,问题就被转 ...
- 65. ExtJs获取文本框中值的几种方式
转自:https://blog.csdn.net/qiu512300471/article/details/17415675/ 1.Html文本框 如:<input type=" ...
- jeesite自定义主题
jeesite cms首页太丑不够逼格,然而国内有很多高大上的皮肤供你选择,那么本文就一步一步教你如何定制自己的CMS站点视图. 1.下载 jeesite 源码,并安装配置成功 2.进入jeesite ...
- MVVMLight消息通知实现机制详解(二)
接上文 MVVMLight消息通知实现机制详解(一) 该工具的内部主要逻辑是以字典模式进行储存持有订阅对象设置的传入参数Type类型.Key值.Action.Target(订阅对象本身) 在发生订阅事 ...
- [Swift通天遁地]七、数据与安全-(2)对XML和HTML文档的快速解析
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- [Swift通天遁地]九、拔剑吧-(16)搭建卡片页面:Card Peek/Pop动态切换界面
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Coursera公开课-Machine_learing:编程作业
第二周编程作业:Linear Regression 分为单一变量和多变量,假想函数为:hθ(x)=θ0+θ1x1+θ2x2+θ3x3+⋯+θnxn.明显已经包含单一变量的情况,所以完成多变量可以一并解 ...