vuex的安装与基本使用

1.vuex 是什么

vuex是实现组件全局管理的一种机制，可以方便的实现组件间的数据共享。

2.vuex的优点

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

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

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

3.什么样的数据适合存储到vuex中？  

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

4.vuex的基本使用

        （1）安装依赖包

                npm install vuex --save

        （2）导入 vuex 包
                

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

        （3）创建 store 对象
               

const  store =   new Vuex.Store({
            state :{
                count:0
            }
}) 

         (4)将 store 对象挂载到 vue 实例中

new Vue({
    el:"#app",
    render: h => h(app),
    router,
    store 
})

​

5.vuex的核心概念

（1） state提供唯一的公共数据源，所有共享的数据都要统一放到Store 的state中进行存储    

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

        1.组件访问state中数据的第一种方式

 this.$store.state.count

         2.组件访问state中数据的第二种方式（推荐使用）

                Ⅰ.从vuex中按需导入mapstate 函数    

 import  { mapState } from 'vuex'  //通过导入的mapSate函数，将当前组件需要的全局数据，映射为 
                                   //当前组件的computed计算属性。
 computed:{
  ...mapState(['count'])
 }    

(2) Mutation (mutation函数中不能写异步的代码，因为vuex调试器会不同步)

        1.用于变更state中的数据   //想要修改state中的数据，只能在mutation函数中修改

        2.通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监测所有数据的变化。

        方法一：

                可以在触发mutation时传递参数，方法如下

        方法二：(推荐使用) 

                1.从vuex中按需导入mutation 函数 

import { mapMutations }   from 'vuex'  

                 2.通过以上导入的mapMutations 函数，将需要的mutation函数，映射为当前组件的methods 方法； 

methods:{
   ...mapMutations(['add','addN'])
}

  (3) Action (用于处理异步任务)

        如果通过异步操作变更数据，必须通过action，而不能用mutation，但是在action中还是要通过出发Mutation的方式间接变更数据。

       1.触发action的第一种方式

this.$store.dispatch

        用commit 来出发 mutation函数中的某个方法

        携带参数的方式：

 2.触发action的第二种方式

        （1）从vuex中按需导入 mapActions 函数    

import  { mapActions }  from 'vuex'

        （2）通过刚才导入的 mapActions 函数，将需要的 action 函数，映射为当前组件的methods 方法

         //将指定的 actions 函数，映射为当前组件的methods 方法

methods:{
 ...mapActions(['addAsync','addNAsync'])
}

  (4) Getter  //只对数据起到包装的作用

        getter 用于对 store 中已有的数据加工处理后形成新的数据，类似于 vue 中的计算属性。

        store 中的数据发生变化,getter 中的数据也会跟着变化。

         1.使用getter 的第一种方式：

        this.$store.getters.名称

this.$store.getters.showNum

        2.使用getter 的第二种方式：

import  { mapGetters }  from 'vuex'
   computed:{
        ...mapGetters(['showNum'])
}

（5）Module

        由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿

        为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态