vuex使用以及介绍

Vuex介绍

vuex 实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享

1. 使用 Vuex 统一管理状态的好处
   ① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
   ② 能够高效地实现组件之间的数据共享，提高开发效率
   ③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
2. Vuex 的基本使用
   ① . 安装 vuex 依赖包
   npm install vuex --save
   ② . 导入 vuex 包
   import Vuex from ‘vuex’
   Vue.use(Vuex)
   ③ . 创建 store 对象
   const store = new Vuex.Store({
   // state 中存放的就是全局共享的数据
   state: { count: 0 }
   })
   ④ . 将 store 对象挂载到 vue 实例中
   new Vue({
   el: ‘#app’,
   render: h => h(app),
   router,
   // 将创建的共享数据对象，挂载到 Vue 实例中
   // 所有的组件，就可以直接从 store 中获取全局的数据了
   store
   })
3. 核心概念概述
   Vuex 中的主要核心概念如下：
    State ：State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
   // 创建store数据源，提供唯一公共数据
   const store = new Vuex.Store({
   state: { count: 0 }
   })
   组件访问 State 中数据的第一种方式：
   this.$store.state.全局数据名称
   组件访问 State 中数据的第二种方式：
   // 1. 从 vuex 中按需导入 mapState 函数
   import { mapState } from ‘vuex’
   通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
   // 2. 将全局数据，映射为当前组件的计算属性
   computed: {
   …mapState([‘count’])
   }
    Mutation ：Mutation 用于变更 Store中 的数据。
   ① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
   ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
   
    Action
   Action 用于处理异步任务。
   如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发
   Mutation 的方式间接变更数据。
    Getter
   Getter 用于对 Store 中的数据进行加工处理形成新的数据。
   ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
   ② Store 中数据发生变化，Getter 的数据也会跟着变化。
    module
   这里面是放对应的模块文件的