Vuex五大核心概念

一. 概述

》Vuex是一个专为Vue.js应用程序开发的状态管理模式。

- 是一个加强版的data！在单页应用中会有一个data函数，管理当前应用的状态。处理大量的需要在组件间传递的数据，直接定义一个全局的data属性保存就行了。

- 如果我们的页面比较简单，切记干万不要没事找事引入Vuex，我们使用Vuex是因为项目变得复杂之后，有很多数据需要在父组件、子组件和孙组件之间传递，处理起来很繁琐，于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西。

- 也是响应式

》什么情况需要使用Vuex管理状态在多个组件间共享？

- 大型项目中组件很多，多个组件中共用的数据

- 例如：用户的登录状态、用户名称、头像、地理位置信息等

- 例如：商品的收藏、购物车中的物品。

二. 安装使用

在手动搭建脚手架时选择vuex，或者搭建好的脚手架通过install来安装

下面来介绍一下Vuex单页面的简单用法：

1. 首先在store目录下的index.js文件中定义一个num，此时num就类似于一个全局状态下的变量：

export default createStore({
  state: {
    num:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 2. 在父组件Home中添加一个加减按钮用来操作num，然后通过$store.state.num插值将num的值显示出来（$store是系统属性，通过$store.state以及this.$store.state可以直接访问全局变量，$store.state用于插值形式，this.$store.state在方法中使用）

    <h2>使用全局状态</h2>
    <h2>{
  {$store.state.num}}</h2>
    <button @click="$store.state.num--">-</button>
    <button @click="add">+</button>

3. 在子组件HelloWorld中应用vuex，通过相同的语法就可以访问到num，当然在不同的页面之间也能通过该语法访问到num

    <h3>在Helloworld组件中应用Vuex</h3>
    <h2>{
  {$store.state.num}}</h2>

此时我们在home页面改变num的值，切换到about页面，num的值也变化了

1. 使用devtools工具查看状态管理

 Vue单页面只是在组件中直接改变了状态，并没有用到状态管理，状态管理如下图所示(参考官网)，我们需要将值提交至Mutations来进行状态管理，而Devtools用来记录状态的改变：

1. 与上一个例子同理，在state中定义一个dnum，在页面中添加加减按钮，此时我们要改变dnum，在Mutations里定义方法操作

export default createStore({
  state: {
    num:0,
    dnum:0
  },
  mutations: {
    sub(state){