[JavaScript知识库]vuex详解

1.vuex定义和使用步骤:

1.vuex是什么?

Vuex是一个专为 Vue.js 应用程序开发的**状态管理模式**(跟路由一样是一个构造函数)， 采用**集中式存储**管理应用的所有组件的状态(数据)，解决多组件数据通信。
相比于简单的组件传值更加强大和灵活,所管理的数据也是可检测的(响应式)
复制代码

2. 使用场景:

多用于大型项目(简单项目中使用普通组件传值或者eventBus就满足了)

3.vuex使用步骤(跟vue-router使用类似):

   3.1 安装包:npm i vuex   (-S项目依赖包 默认可以省略)
   3.2 在目标文件(一般在src文件下新建store文件夹并创建index.js文件)中导入vuex==>   import Vuex from 'vuex' (在此之前确保目标文件中已导入了Vue)
   3.3 使用vuex  ==>  Vue.use(Vuex)
   3.4 实例化一个vuex对象(一般命名为store)
   3.5 将vuex对象默认导出(向外共享)  
 
复制代码

import Vue from 'vue'  // 1.导入Vue
import Vuex from 'vuex'  // 2.导入vuex

Vue.use(Vuex)  // 3.使用vuex

// 4.实例化vuex对象
const store = new Vuex.Store({
// state中就是vuex所管理的数据
  state: {
    count: 0
  }
})
// 5.最后默认导出
export default store
// 6.在main.js文件中的导入vuex实例对象并挂载到Vue实例身上
复制代码

3.6 在main.js入口文件中导入vuex实例并向Vue实例身上挂载vuex实例: 代码如下
复制代码

// ....省略其他代码
// 1. 导入store实例
import store from './store' 

new Vue({
  // 省略其他...
  store   // 2. 注入Vue实例(es6简写形式)
})

2.vuex核心

先看看vuex实例完整写法:

// new实例的时候传入一个配置对象 该配置对象的5个属性也是对象
const store = new Store({
    state: {   // state对象存储的是vuex所管理的公共数据
        a:1
    },
    mutations: {   // mutations对象中的属性都是函数 用来修改state中的数据,第一个参数接收的是state对象,第二个参数是传入的新值(调用方法下面讲到)
        changeNum(state,newNum) {
            state.num*=2 // 修改state中的数据
        }
    },
     // getters对象中的属性也是函数 对state中的数据处理然后被引用(作用相当于组件中的计算属性)
    getters: {
        total(state) {
            return state.num*2 
        }
    },
    // actions对象的属性都是函数 作用:
    //   1. action中可以通过调用 mutation来修改state，而不是直接变更状态。
-   //   2.action 可以包含**任意异步**(例如ajax请求)操作
    actions: {
    // context 参数下面详解
        getNums(context) {
             // 一般为Ajax请求
        }
    },
  // 在当前文件中对某些状态(数据)的操作过多时,可以把相关属性的操作单独放入另外的文件中,
  //然后导入到当前文件,并把导入的模块挂载到modules对象上 
    modules: {
        // 从外部文件导入的模块
    }
})
复制代码

注意点: 修改状态(数据)如果是异步的(用异步请求得到的数据替换当前的数据),最好使用在actions中调用mutations中的方法来实现修改(调用格式下面会讲到)

3.vuex核心使用方法

来一张我画的图(有点丑,第一次画):

3.1 mutations使用:

3.1.1定义格式如下:

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

3.1.2使用格式如下:

this.$store.commit('mutation名', 新数据(状态)，给第二个参数)
复制代码

3.2 getters使用:

3.2.1定义格式如下:

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

3.2.2使用格式:

在组件中通过：`$store.getters.getter的名字` 来访问
复制代码

3.3Vuex用actions发异步请求

3.3.1作用: 我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

• action中可以通过调用 mutation来修改state，而不是直接变更状态。
• action 可以包含任意异步(例如ajax请求)操作

3.3.2 定义:

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

3.3.3使用

在组件中通过`this.$store.dispatch('actions的名字', 参数)`来调用action
复制代码

再来一张图:

Vuex-辅助函数mapState来使用公共数据

作用: 当访问某个数据项嵌套太深了，能不能优化一下访问的方式？

用mapState把公共数据（vuex.store） 映射 到本组件内部的计算属性中

mapState的使用步骤:

// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: {
   // 说明1： ...对象 是把对象展开，合并到computed
   // 说明2： mapState是一个函数 
   //  ['数据项1'， '数据项2']
   ...mapState(['xxx'])，
   ...mapState({'新名字': 'xxx'})
}
复制代码

使用

this.xxx
{{xxx}}
复制代码

实例

// 步骤
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象： { books: function() {}}
// console.log('mapState', res)

export default {
  computed: {
    c1 () {
      return 'c1'
    },
    // books: function() {}
    // ..res： 把res这个对象合并到computed对象中
    // ...res
    ...mapState(['books'])
  }
}
</script>

Vuex-map函数用法汇总

如何使用全局state

• 直接使用： this.$store.state.xxx;

• map辅助函数：

  computed: { 
   ?...mapState(['xxx']), 
   ?...mapState({'新名字': 'xxx'})
  }
  复制代码

如何使用modules中的state

• 直接使用： this.$store.state.模块名.xxx;

• map辅助函数：

  computed: { 
   ?...mapState('模块名', ['xxx']), 
   ?...mapState('模块名', {'新名字': 'xxx'})
  }
  复制代码

如何使用全局getters

• 直接使用：this.$store.getters.xxx

• map辅助函数：

  computed: { 
   ?...mapGetters(['xxx']), 
   ?...mapGetters({'新名字': 'xxx'})
  }
  复制代码

如何使用modules中的getters

• 直接使用： this.$store.getters.模块名.xxx

• map辅助函数：

  computed: { 
   ?...mapGetters('模块名', ['xxx']), 
   ?...mapGetters('模块名',{'新名字': 'xxx'})
  }
  复制代码

如何使用全局mutations

• 直接使用：this.$store.commit('mutation名', 参数)

• map辅助函数：

  methods: { 
   ?...mapMutations(['mutation名']), 
   ?...mapMutations({'新名字': 'mutation名'})
  }
  复制代码

如何使用modules中的mutations（namespaced:true）

• 直接使用： this.$store.commit('模块名/mutation名', 参数)

• map辅助函数：

  methods: { 
   ?...mapMutations('模块名', ['xxx']), 
   ?...mapMutations('模块名',{'新名字': 'xxx'})
  }
  复制代码

如何使用全局actions

• 直接使用：this.$store.dispatch('action名', 参数)

• map辅助函数：

  methods: { 
   ?...mapActions(['mutation名']), 
   ?...mapActions({'新名字': 'mutation名'})
  }
  复制代码

如何使用modules中的actions（namespaced:true）

• 直接使用： this.$store.dispatch('模块名/action名', 参数)

• map辅助函数：

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