Vuex | 程序员灯塔

简介

　　在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

搭建环境

　　创建主文件，通常为 src/store/index.js

// src/store/index.js

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions对象
const actions = {}
// 准备mutations对象
const mutations = {}
// 准备state对象
const state = {}
// 准备getters对象
const getters = {}

// 创建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state,
   getters
})

// main.js
......
// 引入store
import store from './store'
......

// 创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})

基本使用

　　首先介绍 state、getters、actions、mutations 四个对象

state

　　state中主要用来存储需集中管理的数据

　　组件中读取 Vuex 中的数据可以采用如下方式(不要直接修改 Vuex 中的数据，修改使用 action 或 mutations )

this.$store.state.XXX

getters

　　当state中数据需要加工时,可使用getters加工后再使用

　　例如：

// 获取10倍的数据
const getters = {
    // 
    bigSum(state){
       return state.sum*10
    }
}

　　使用：

this.$store.getters.bigSum

　　getters有一个默认参数 state，可直接获取state中的数据

　　正常情况下getters无需传参，但若想传参，可以采用一个小技巧，即返回一个函数，如下所示：

// 获取n倍的数据
const getters = {
    bigSum(state) => (n) =>  state.sum * n
}

　　使用

this.$store.getters.bigSum(10)

mutations

　　用于操作数据(state)

　　mutations 中的方法通常有两个参数，一个是 state，一个是传入的 value

const mutations = {
    JIA(state, value){
        // 执行操作的逻辑写在mutations中
        state.sum += value
    },
    JIAN(state, value){
        state.sum -= value
    }
}

　　使用：

　　通过 commit() 执行方法，需传入两个参数，一个是 mutations 中定义的方法名（字符串），一个是需要传入的数据

methods: {
    add(){
        // 没有判断数据的逻辑,所以可以直接commit操作mutations
        this.$store.commit("JIA", this.n)
    },
    jian(){
        this.$store.commit("JIAN", this.n)
    },
}

actions

　　actions 通常用于响应组件中的动作，比如在提交 mutations 前，用于执行一些判断逻辑等

　　如下所示，actions 的方法中通常包含两个参数

　　　　(1) context，可以使用其 context.commit() 方法提交 mutations ，或使用 context.state 直接操作数据

　　　　(2) value，待传入的数据

const actions = {
    jishujia(context, value){
        // context上下文中也可获取到state数据
        // 用于判断数据的逻辑写在actions中
        if(context.state.sum % 2){
            context.commit("JIA", value)
        }
    },
    jiawait(context, value){
        setTimeout(() => {
            context.commit("JIA", value)
        }, 1000);
    }
}

　　使用：

　　通过 dispatch 执行actions中的方法，需传入两个参数，方法名和数据

methods: {
    jishujia(){
        // 要通过actions层就要dispatch
        this.$store.dispatch("jishujia", this.n)
    },
    waitAdd(){
        this.$store.dispatch("jiawait", this.n)
    }
}

小结

　　从上述介绍中我们可以总结出使用规律：

　　（1）当需直接获取数据时，可使用 this.$store.state.XXX 获取数据

　　（2）当需直接获取加工后的数据时，可定义 getters 并通过 this.$store.getters.XXX 获取加工后的数据

　　（3）当有网络请求或其他业务逻辑，可使用 dispatch => actions提交动作 => mutations操作数据

　　（4）当无需判断或简单逻辑时，可直接使用 commit =>mutations操作数据

四个map方法的使用

　　每次使用时都需要 this.$store，太麻烦，Vue提供了一种映射方法可直接在组件内部操作Vuex，即为 mapState、mapGetters、mapActions 和 mapMutations。

程序员灯塔
转载请注明原文链接：Vuex

简介​