【Vue】全家桶之Vuex

概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

组件间共享数据的方式

• 父向子传值：v-bind属性绑定
• 子向父传值：v-on事件绑定
• 兄弟组件之间共享数据：EventBus
• $on 接收数据的组件
• $emit 发送数据的组件

想象一个场景

如果你的项目里有很多页面（组件/视图），页面之间存在多级的嵌套关系，此时，这些页面假如都需要共享一个状态的时候，此时就会产生以下两个问题：

• 多个视图依赖同一个状态
• 来自不同视图的行为需要变更同一个状态

动动你的小脑袋你就会想到解决以上方法的方案:

• 对于第一个问题，假如是多级嵌套关系，你可以使用父子组件传参进行解决，虽有些麻烦，但好在可以解决；对于兄弟组件或者关系更复杂组件之间，就很难办了，虽然可以通过各种各样的办法解决，可实在很不优雅，而且等项目做大了，代码就会变成屎山，实在令人心烦。
• 对于第二个问题，你可以通过父子组件直接引用，或者通过事件来变更或者同步状态的多份拷贝，这种模式很脆弱，往往使得代码难以维护，而且同样会让代码变成屎山。

此时，既然思考到了这里，如果换一种思路呢：

• 把各个组件都需要依赖的同一个状态抽取出来，在全局使用单例模式进行管理。
• 在这种模式下，任何组件都可以直接访问到这个状态，或者当状态发生改变时，所有的组件都获得更新。
  这时候，Vuex诞生了！

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux。与其他模式不同的是，Vuex 是专门为 Vue 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

官网的vuex使用周期图

安装

npm install vuex --save

使用

导入

import Vuex from 'vuex'
Vue.use(Vuex)

创建store对象

const store = new Vuex.Store({
    // state中存放的就是全局共享数据 
    state:{     
    count: 0 
    } 
})

挂载store对象

new Vue({ 
    el: '#app', 
    render: h=>h(app)m 
    router, 
    //将创建的共享数据对象,挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store 
})

创建带vuex的vue项目

1. 打开终端，输入命令：vue ui
2. 当项目仪表盘打开之后，我们点击页面左上角的项目管理下拉列表，再点击Vue项目管理器
3. 点击创建项目
4. 设置项目名称和包管理器
5. 设置手动配置项目
6. 设置功能项
7. 创建项目

项目代码格式化:

在项目根目录(与src平级)中创建 .prettierrc 文件，编写代码如下：

{
    "semi":false,
    "singleQuote":true
}

核心概念

State

Getter

Mutation

Action

Module

来源

手把手教你使用Vuex，猴子都能看懂的教程
Vue系列之—Vuex详解