vuex的学习

一.vuex是什么?

vuex是vue官方提供的独立于组件体系之外的，管理公共数据的工具

 二.vuex的使用

1.安装 vuex 包:     npm install vuex

2.实例化store:         在src目录下创建store文件夹,然后在store文件夹下创建index.js.index.js的初始化代码如下:

                

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

 3.向Vue实例注入store:

// 省略其他
// 1. 导入store
import store from './store' 

new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

4.在组件中使用store:在任意组件中，

a.通过this.$store.state 来获取公共数据。

b.通过this.$store.commit('mutation名', 实参(给第二个参数))来修改数据

c.通过$store.getters.getter的名字来对现有的状态进行计算得到新的数据-------派生

d.通过this.$store.dispatch('actions的名字', 参数)调用mutation来修改state,并且可以包含任意异步函数(ajax请求)

三.vue-devtool调试工具

四. state

1.作用:统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

2.格式:

new Vuex.store({
  state: {
   属性名： 属性值 
  }
})

3.小结:state的作用是保存公共数据(多组件中共用的数据),它是响应式的,如果修改了数据,相应的在视图上的值也会变化

4.图解:

 五.mutations

1.作用:通过他来修改state中的公共数据(类似于methods)

2.格式:

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
      mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    },
    }
})

3.小结:第一个参数是必须的,表示当前的state.在使用时不需要传入,第二个参数是可选的,表示载荷,是可选的,在使用时需要传入数据(如果有多个数据的话,可以用对象的形式传入数据)

4.图解:

 六.getters

1.作用:类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生  )

2.格式:

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

3.小结:它的作用是从已有的公共数据项中派生出新的数据项,类似于computed

4.图解:

 七.actions

1.作用:可以使用actions来修改state,这一点是类似于mutation的,不同在于:

a.action中是通过调用mutation来修改state,而不是直接变更状态

b.action可以包含任意异步(例如ajax请求)操作

2.格式:

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改/保存数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

3.小结:action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

4.图解:

 八.module

1.作用:拆分模块,把复杂的场景按模块来拆开

2.格式:

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
      模块名1： {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
          namespaced: true, 
            state: {},
              getters: {},
              mutations: {},
              actions: {},
              modules: {}
      }，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
            state: {},
              getters: {},
              mutations: {},
              actions: {},
         modules: {}
      }  
  }
})

3.小结:

a.使用了modules之后，在访问数据时就要额外添加modules的名字了。

b.在使用modules时，建议都给加上namespaced:true

4.图解:

 九.vuex辅助函数:

 

前提:以下所有方法都需要先导入

import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
(假设以下所有的modules模块名为userInfo)

1.mapState

a.直接使用:

全局:this.$store.state.xxx

局部:this.$store.state.模块名.xxx

b.定义:

全局:

computed: { 
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}

局部:

computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

c.使用:

全局:{{ xxx }}

局部:{{ userInfo.name }}

2.mapGetters

a.直接使用:

全局:this.$store.getters.xxx

局部:this.$store.getters[模块名/xxx]

b.定义:

全局:

computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}

局部:

computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

使用:

全局和局部一样:{{ xxx }}

3.mapMutations

直接使用:

全局:this.$store.commit('mutation名', 参数)

局部:this.$store.commit('模块名/mutation名', 参数)

定义:

全局:

methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

局部:

methods: { 
  ...mapMutations('模块名', ['this.mutation名']), 
  ...mapMutations('模块名',{'新名字': 'this.mutation名'})
}

使用:

全局和局部一样:this.mutation名()

4.mapActions

直接使用:

全局:this.$store.dispatch('action名', 参数)

局部:this.$store.dispatch('模块名/action名', 参数)

定义:

全局:

methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

局部:

methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}

使用:

全局和局部一样:this.action名()