Vue.js进阶系列(49)--Vuex基本使用和核心概念

  前面我们已经知道Vuex在进行多页面状态管理的基本原理,下面我们对Vuex的基本使用和核心概念做简单的介绍

一、基本使用1 - devtool

1.定义

devtool 是浏览器的一个插件,主要用来记录和跟踪被修改过的state状态。

2.安装步骤

既然是一个插件,那么我们首先的在浏览器中安装好,下面是安装的具体步骤:
  点击Chrome浏览器右上角三个小点 --> 更多工具 --> 拓展程序 --> 点击 “打开Chrome网上应用商店” --> 在搜索框中输入 “devtools” -->安装“Vue.js.devtools” 即可。
  安装完成之后,重新关闭浏览器,然后在浏览器中打开自己创建好的项目,如果在控制台的菜单栏中看到有Vue的字样说明安装成功了。

3.切换至Vuex页面

在上面安装好的插件中,我们可以点击 “Vuex”切换到Vuex来查看Vuex相关的东西。


  在这个页面中,我们就可以实时跟踪Vuex一些状态的变化。下面我们将昨天没有讲解到的通过 Vue Components --> Action --> Mutations --> State 这个路径修改的状态通过mutation来实现。

二、基本使用2 - Mutations

1.定义

  通俗的理解就是里面装着一些改变数据方法的集合。把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离。

切记:Vuex中store数据改变的唯一方法就是mutation!

2.用法

① 在mutations中书写先关的操作。其实就是在mutation声明方法,代码如下所示:

const store = new Vuex.Store({
    state:{
      counter:100
    },
    mutations:{
      increase(state){
        state.counter++
      },
      decrease(state){
        state.counter--
      }
    }
})

  任何修改Vuex状态的数据都在mutations中处理,上述代码中,声明了两个方法 increase 和 decrease,默认的参数传递的都是state,然后主要的操作就是对counter进行加法运算和减法运算。
② 在组件中引用mutations
  在写好了相关的处理操作后,我们在需要的页面中引用mutations即可,引入时不是直接引入mutation的方法,而是通过commit提交相应的方法。具体代码如下:

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addcounter" >+</button>
    <button @click="deccounter" >-</button>
    <hellovue></hellovue>
  </div>
</template>

<script>
  import hellovue from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{
    hellovue
  },
  methods:{
    addcounter(){
      this.$store.commit('increase')
    },
    deccounter(){
      this.$store.commit('decrease')
    }
  },
    data(){
        return {
            message:"我是组件1",
        }
    }
}
</script>

  上述代码中,定义了adcounter和deccounter两个方法,在两个方法中分别通过 this.$store.commit('decrease') 来获取mutations中的方法。实现后的效果如下所示:


  当点击 “+或者 - ”时,右上方就会跟踪到increate或者decreate方法,当点击其中一个方法时,在右下方会显示该状态下的counter具体数值是多少,从而达到了追踪和记录的目的。

三、核心概念1 - state单一状态树

  Vuex中有五个核心的概念,分别是 state、mutaion、action、getter、module。首先在state中有个比较关键的概念--单一状态树

1.引入背景

为了便于大家的理解,小编这里例举了一个例子。
  我们知道,在国内我们有很多的信息需要被记录,比如上学时的个人档案,工作后的社保记录,公积金记录,结婚后的婚姻信息,以及其他相关的户口、医疗、文凭、房产记录等等(还有很多信息)。
  这些信息被分散在很多地方进行管理,有一天你需要办某个业务时(比如入户某个城市),你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息,最后到一个地方提交证明你的信息无误。
  这种保存信息的方案,不仅仅低效,而且不方便管理,以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)。

2.定义

英文名称是Single Source of Truth,也可以翻译成单一数据源。
  为了不让状态信息保存到多个Store对象中的,Vuex使用了单一状态树来管理应用层级的全部状态。单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。
  用一句话来概括就是:在项目中最好只new 一个store对象,然后所有状态有关的东西都放在一个store中的state进行统一的管理
❤今天的内容就到此结束啦!记得点赞哟❤

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容