vuex是什么?

官网的解释是

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools,extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

而就我浅显的理解是

它类似一个html里面的全局变量,可运用于全局,而vue存储的东西,可以运用于vue所有的组件,方便与组件里面数据的接受与监听。

vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】

安装

 
 
1
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的浅解的更多相关文章

  1. 从最大似然到EM算法浅解

    从最大似然到EM算法浅解 zouxy09@qq.com http://blog.csdn.net/zouxy09 机器学习十大算法之中的一个:EM算法.能评得上十大之中的一个,让人听起来认为挺NB的. ...

  2. 面试-1-C#浅解

    面试-1   C#浅解众所周知c#是微软推出的一款完全没面向对象的编程语言,那么对象是什么?在现实生活中人们一提到对象首先想到的就是“情侣”!但是在我们的程序中对象是什么? 在程序中个能够区别于其他事 ...

  3. GIS历史概述与WebGis应用开发技术浅解

    声明:本篇在李晓晖的<杂谈WebGIS>,补充更多的资料说明.基于地图二次开发一直断断续续在做,这里算是补充一下基本功把.其实对于前端,WebGis开发都是api,抄demo,改.GIS深 ...

  4. List根据某字段去重,以及compareTo 浅解

    原文链接:https://blog.csdn.net/qq_35788725/article/details/82259013 Collections.sort可对集合进行排序 根据List里面某个字 ...

  5. Vuex state 状态浅解

    对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...

  6. vuex基础详解

    vuex入门 安装 vuex为我们提供了两种使用方法 直接引入 vuex下载地址:https://unpkg.com/vuex@2.0.0 下载之后用< script >标签包裹引入即可 ...

  7. JVM中GC浅解:垃圾回收的了解

    1.为什么要有GC 没有GC的世界,我们需要手动进行内存管理,但是内存管理是纯技术活,又容易出错.但是我们写码的目的是为了解决业务问题,所以可以把这种纯技术活自动化,当然自动化也是有代价的. 2.垃圾 ...

  8. [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...

  9. Rest_framework Serializer 序列化 (含源码浅解序列化过程)

    目录 Rest_framework Serializer 序列化 序列化与反序列化中不得不说的感情纠葛 三角恋之 save/update/create 四角恋之 序列化参数instance/data/ ...

随机推荐

  1. 通过代码获取log4net的文件路径

    http://stackoverflow.com/questions/1343749/get-log4net-log-file-in-c-sharp Solution is quite easy in ...

  2. poj2104 k-th number 主席树入门讲解

    poj2104 k-th number 主席树入门讲解 定义:主席树是一种可持久化的线段树 又叫函数式线段树   刚开始学是不是觉得很蒙逼啊 其实我也是 主席树说简单了 就是 保留你每一步操作完成之后 ...

  3. java使用poi读取word(简单,简约,直观)

    java使用poi读取word(简单,简约,直观) 说明 其实poi的官网上面都是有接口和样例的,只是都是英文 例如网址:http://poi.apache.org/spreadsheet/quick ...

  4. Luogu1275魔板

    https://zybuluo.com/ysner/note/1136271 题面 有这样一种魔板:它是一个长方形的面板,被划分成\(n\)行\(m\)列的\(n*m\)个方格.每个方格内有一个小灯泡 ...

  5. openstack Aio env deubg

  6. eclipse ------validation功能

    今天来讲讲eclipse 的validation功能,该功能用于检测代码存在的“潜在”问题,比如:JSP文件的语法错误,XML中的schema错误等,这么好的功能还有什么可讲的呢,我今天要讲的是val ...

  7. Dsp和ARM的区别

    有一次上课老师在将ARM的时候说到了Dsp. Dsp(Digital Signal Process),数字信号处理技术,而Dsp芯片和ARM的结构也有很多相似之处.比如有流水线.采用哈佛结构(早期的A ...

  8. python抢票开发——设备预约助手实现

    女朋友是药学院的,做实验时需要在特定的网站上进行设备预约,由于预约人数过多,从而导致从浏览器登录不进去或者登录进去预约失败等情况,所以我用python帮她写了一个抢位助手,让程序自动去进行位置预定,实 ...

  9. 【POJ1845】Sumdiv(数论/约数和定理/等比数列二分求和)

    题目: POJ1845 分析: 首先用线性筛把\(A\)分解质因数,得到: \[A=p_1^{a_1}*p_2^{a_2}...*p_n^{a_n} (p_i是质数且a_i>0) \] 则显然\ ...

  10. C#模拟百度登录并到指定网站评论回帖(二)

    序言: 回归正题:前面讲到的抓包分析的数据,是模拟登录要获得得必要信息(当然有些也不是必要的...我只是都列举出来这样有个对比)如果说,有哪个英文字母不知道什么意思的,可以问一下度娘,有不少前辈都发过 ...