VueX（Vue状态管理模式一)

一、Vuex是什么

       Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。 

要点：

1. vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
2. 集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }}
3. 数据变化是可预测的 (响应式)

二、Vuex-在Vue项目使用Vuex 

1. 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
2. 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。具体如下图示：

1.2 安装

由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

• Npm安装Vuex

• 这里只说明第1种情况。在旧项目中使用vuex
  假设之前已经有一个vue项目了，其中并没有使用vuex，现在我们来用一下。
  注意，这里省略用vue脚手架创建项目的过程。
  
  整体步骤：
  
  1安装。它是一个独立的包，需要先安装。
  2配置
          a创建Vuex.store实例
          b向Vue实例注入store
  3使用。在组件中使用store
  
          安装包：进入项目目录，安装包
  
                npm install [email protected]
  
  开发依赖 ： npm i xxxx --save-dev ;  npm i xxxx -D ;
  
  生产依赖： npm i xxxx --save ;            npm i xxxx -S;     npm i xxxx
  
  1.3.1实例化store
  
  与router一样，当我们在项目中使用vuex之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：
  

在store/index.js 中放置具体的代码，具体如下：

 

1.3.2 向Vue实例注入store

在src/main.js中：

1. 导入store
2. 并注入Vue实例

在组件中使用store

在任意组件中，通过this.$store.state 来获取公共数据。

1.3.3 在组件中使用Vuex

例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示

<template>
    <div id='app'>
        name:
        <h1>{
   
   { $store.state.name }}</h1>
    </div>
</template>

或者要在组件方法中使用

...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

注意，请不要在此处更改state中的状态的值.

1.4 安装Vue开发工具VueDevtools

       在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。