Vuex 是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间的传值了，如果组件不需要共享，此时这些不需要共享的数据，没必要放到Vuex中.
只有共享的数据，才有权放vuex 中，组件内部私有的数据，只要放到组件的data中即可: props、data、 vuex 三者的区别:
Props是子组件需要传递的数据。data 是组件内部私有属性vuex是全局共享的数据存储区域,相当于是一个数据的仓库安装vuex，
sudo npm i vuex --save
导入包
import Vuex from 'vuex'注册vuex到vue中
Vue.use(Vuex)new Vuex.Store()实例，得到一个数据存储对象
import Vue from 'vue' // 1. 导入vue-router包 import VueRouter from 'vue-router' // 2. 手动安装VueRouter Vue.use(VueRouter) // 3.导入app组件 import app from './app.vue' //配置步骤 // 1. 装包 // 2. 导入包 // 3. 注册包 // 4. 注册一个实例 // 5. 将vuex挂载到实例上 import Vue from 'vue' // 1. 导入vue-router包 import VueRouter from 'vue-router' // 2. 手动安装VueRouter Vue.use(VueRouter) // 3.导入app组件 import app from './app.vue' //配置步骤 // 1. 装包 // 2. 导入包 // 3. 注册包 // 4. 注册一个实例 // 5. 将vuex挂载到实例上 import Vuex from 'vuex' Vue.use(Vuex) var store = new Vuex.Store({ state: { //专门用来存数据的 // 如果在组件中，想要访问.store中的数据，只能通过this.$store.state.*** 来访问 count: 0 }, mutations: { // 如果要操作store 中的数据，只能通过调用mutations提供的方法，才能操作对应的数据 // ，不推荐直接操作state中的数组,万一导致了数据的紊乱，不能快速定位到错误的原因， // 每个组件都可能有操作数据的方法 // 定义一个管理员 increment(state) { state.count++ }, // 只能传两个参数,其中参数一是 state 状态，参数二是提交过来的参数 // 可以通过传入一个对象 subtract(state, obj) { state.count -= (obj.c + obj.d) } }, getters: { // 这里的数据只负责对外提供数据，不负责修改,如果想要修改，请去找mutation // 如果store中的state上的数据，在对外提供的时候，需要做一些包装，推荐使用getters.*** optCount: function (state) { return '当前最新的count值是:' + state.count } // 对比之后，getters中的方法和组件中的过滤器类似，因为过滤器和getters都不会修改数据，都是把原数据做了包装提供给了调用者 // getters和 computed 比较像，只要state的数据发生变化，如果getters也引用了这个数据，立刻触发重新求值 } }) var vm = new Vue({ el: "#app", render: c => c(app), store //在VM实例中，将vuex 创建的store 挂载到vm实例上，只要挂载到了vm上，就能全局访 // 问所有的组件，任何组件都可以通过store来访问数据 })在VM实例中，将vuex 创建的store 挂载到vm实例上，只要挂载到了vm上，就能全局访问所有的组件，任何组件都可以通过store来访问数据
store如果在组件中，想要访问.store中的数据，只能通过this.$store.state.***来访问
组件想要访问store内部的数据，使用this.$store.count++，但是不推荐，不符合vuex的设计理念推荐使用通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中的数组,万一导致了数据的紊乱，不能快速定位到错误的原因，每个组件都可能有操作数据的方法
