第九节：Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和案例实战演练

一. Vuex简介/基本使用

1. 背景

　传统的组件见的交互模式如下： (可参考：https://www.cnblogs.com/yaopengfei/p/12326466.html)

(1). 父向子传值：v-bind 属性绑定

(2). 子向父传值：v-on 事件绑定

(3). 兄弟组件之间共享数据： EventBus

　$on 接收数据的那个组件

　$emit 发送数据的那个组件

2. 简介

(官方网站：https://vuex.vuejs.org/zh/)

(1). 定义

　Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。下图是没有vuex和有vuex时的处理模式。

第九节：Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和案例实战演练

(2). 好处

　① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护

　② 能够高效地实现组件之间的数据共享，提高开发效率

　③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

(3). 什么情况下采用Vuex

　一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

3. 基本使用

(1). 已经存在的项目中引入Vuex

A. 安装Vuex组件包

npm install vuex --save

B. 在main.js中导入Vuex

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

C. 创建Vuex对象store

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

PS：通常将Vuex单独封装到一个store.js文件中，然后在main.js中进行导入即可，然后挂载即可

main.js导入代码，挂载见步骤D

import store from './store'

store.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  }
})

D. 将 store 对象挂载到 vue 实例中

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

(2). 新建项目时引入Vuex

　使用图形化界面进行创建项目，选择插件的时候，要勾选Vuex，如下图：

第九节：Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和案例实战演练

其它详细步骤可参考：https://www.cnblogs.com/yaopengfei/p/14506321.html

创建后的项目：

　src根目录下，创建了一个Store文件夹，下面有index.js文件，用来处理vuex

第九节：Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和案例实战演练

index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

View Code