对VueX知识初步的整理与解析

对Vuex的初步认识

    在认识Vuex之前，我们应该对Vue的使用有了基本的认识跟使用。在Vue中我们学习到了组件化，组件之间的数据传递主要有父传子，子传父跟兄弟传递。但是有些数据我们需要频繁传递或者很多组件中有相同的数据，这时我们一般用EventBus(事件总线)进行集中管理，而EventBus就充当了个组件中间共同的事件中心，今天我们学习的Vuex是官方专门为Vue开发的一种开发模式也可以说是库

一.为什么要学习Vuex？

        由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

       但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。

       因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了

二.Vuex是什么？

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的

结构示意图：

三. vuex 的核心概念

     3.1 store

       vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

      3.1.1 创建store

const store = new Vuex.Store({...});

    3.1.2store完整的结构

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

四.熟悉Vuex中五个核心属性

    分别是 State（存放状态）、 Getter（state的计算属性）、Mutation（更改状态的逻辑，同步操作） 、Action（提交mutation，异步操作）、 Module（将store模块化）

State：

      作用：保存公共数据

      操作：在组件中获取公共数据

                  在代码中使用：this.$store.state.属性名

                  在模板中使用： {{$store.state.xxx}}

Mutation：

     作用：修改公共数据

     定义：

new Vue.store({
     state:{},
     mutations: {
        'xxxx': function(state, 形参){
              state.xxxxx = 形参
     }

})

     操作：在组件中修改公共数据

              this.$store.commit('mutations名字'， 参数)

              this.$store.commit({type: 'mutations名字', p1:value1, p2:value2})

Getter：

     作用：对state中的数据进行加工，得到新数据（类似于计算属性）

     格式：getters : {  getter的名字(state) { return xxxx}  }

     访问：this.$store.getters.XXXX

     经典应用：图书的总价格

actions：

     作用：做异步操作来修改数据

     格式：actions : {  actions的名字(context, 参数) {  异步操作；context.comit('mutation')}  }

     要点：它是通过调用mutations来修改数据的

     访问：this.$store.dispatch(actions的名字)

     经典应用：ajax取回数据，通过mutation保存到state中

modules：

     作用：拆分模块,把复杂的数据拆成一个一个独立的小模块

     格式：{modules: {模块1：｛state: {}, actions: {}, getters: {}, mutations: {}｝ }}

     操作：1.访问模块中的数据：this.$store.模块名.数据

                2.操作数据：

                       2.1：访问模块中的数据：不加namespaced:true

                       2.2：加了之后：this.$store.commit('模块名/mutations的名字')

      要点：namespaced: true