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. RAID5配置及服务器2003系统安装方法。2000系统的安装要使用7.9版本的引导盘

    服务器2003系统安装方法.2000系统的安装要使用7.9版本的引导盘 RAID5配置: 1.为新到的惠普DL380服务器装系统,首先要配置RAID阵列. 如下图进行配置. 启动到如上图阶段,按F8. ...

  2. sql server数据库添加记录

    转自:http://jingyan.baidu.com/article/f25ef254449a9a482c1b8293.html

  3. Kubernetes 集群中使用 Helm 搭建 Spinnaker

    在我们部署Spinnaker之前,我们需要一个YAML格式的配置文件,它会包含了一些配置信息.可以从Spinnaker Helm Chart repository[2]获得这个文件. $curl -L ...

  4. 洛谷P2668斗地主(搜索)noip2015

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

  5. AcWing算法基础1.4

    高精度 高精度加法,高精度减法,高精度乘低精度,高精度除以低精度,大概平时用的最多的就是这四个,模板有两种(因为我现在不太会用vector,就用数组也写了个,23333) 高精度运算和人工手算差不多, ...

  6. .net 必看书籍1

    我们2个网站运营群,有很多技术高手,同时也有大部分技术新人,如何从传统asp转到.net,从传统table转到div+css布局,从传统技术转到ajax,从小型程序转到高性能并发的大型程序,我花了2小 ...

  7. Android 签名(5)用命令签名和用android studio,eclipse签名

    1,用命令签名 无论用哪个 IDE 开发,最终只是用了 keytool 和 jarsigner 这两个 Java 工具来完成签名任务(在 jdk 的 bin 目录下).其中 keytool 用来生成 ...

  8. Unity Sprite Packer 问题集合

    介绍 今天突发奇想用了下sprite packer 这个功能,基本用法网上教程一堆一堆的,这里就不赘述了. 在使用sprite packer过程中遇到一些问题,然后各种百度不到答案,最后和谐上网找到了 ...

  9. linux,apache,mysql,php常用查看版本信息的方法

    1. 查看linux的内核版本,系统信息,常用的有三种办法: uname -a; cat /proc/version; -bash-4.2$ uname -a Linux apphost -.el7. ...

  10. js分页插件

    //分页插件1function showView(option) {    //参数定义id,页容量,当前页,总数,页总数    var id = option.id,         pageSiz ...