十、Vue：Vuex实现data(){}内数据多个组件间共享

一、概述

官方文档：https://vuex.vuejs.org/zh/installation.html

1.1vuex有什么用

Vuex：实现data(){}内数据多个组件间共享一种解决方案（类似react的redux）

1.2什么情况下使用vuex

    虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
    如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
    

1.3Vuex状态管理

    view ->(dispatch) Action ->(Commit) Mutations ->(Mutate) State -> View
    注意：Action不是必需品，如果有异步操作才可能用到Action，否则可以不使用

1.4Actions：

    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。

二、安装及使用

官方文档：https://vuex.vuejs.org/zh/installation.html

安装方法1，npm

cnpm install vuex --save
或
npm install vuex --save

安装方法2，cdn

其它略过，见文档。

【使用】

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

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

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

2.1 vuex定义共享数据和引用 state:{}

应用场景： 例如在购物车中，你在商品详情页进行加减库存操作，而到购物车详情中时，用之前学得的data(){}内数据用法，你是得不到商品详情里的商品数量这个数据的，此时就引入了state:{}做为所有页面的共享数据，加减商品都可使用此处的数据，从而实现数据的共享。
代码实例
（多余代码为父子组件互传值复习）

第1步，引入vuex并创建store实例 src/main.js

[1]引入vuex
[2]使用vuex
[3]创建一个store实例（主要）
[4]所有组件共用数据存放处
[5]注入store（重要）

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

第2步，引用1步所创建的共享数据count(src/components/home.vue)

【1】获取store里的共享数据方法1直接调用（this.\(store.state.count） ```javascript