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

一、基本使用1 - devtool

1.定义

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

2.安装步骤

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

3.切换至Vuex页面

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

二、基本使用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中的方法。实现后的效果如下所示：

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

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

1.引入背景

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

2.定义

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