Vuex初识

vuex 整个过程包括

首先创建 store 并暴露

export default new Vuex.Store({
    actions,
    mutations,
    state,
})

接着介绍 state 他在 store 文件夹中的js文件中 作数据存储

// state 用于存储数据
const state = {
    sum: 0, 
}

接下来是 Vuex 的整个处理数据的过程，也是共享数据的过程 

1. dispatch('function', value)

由 vc 执行 dispatch('functionName', value)

<script>
export default {
  name: "CountSum",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  methods: {
    add() {
      this.$store.commit("ADDNUM", this.n);
    },
    sub() {
      this.$store.commit("SUBNUM", this.n);
    },
    // 直接与mutations对话的时候，注意函数名
    odd_add() {
      // 判断奇数
      this.$store.dispatch("oddadd", this.n);
    },
    wait_add() {
      this.$store.dispatch("waitadd", this.n);
    },
  },
};
</script>

2. actions

由 dispatch 执行传入参数的函数名的 actions 中的函数，并传入对应 value

const actions = {
    // actions 中的函数会接收到两个参数 ，第一个是 迷你的 store 含有部分store的功能 ， 第二个是值
    // context 中含有 state 可以调用判断里面的数据作逻辑

    oddadd(context, value) {
        // if (context.state.sum % 2) {
        //     context.commit('FUNCTION', value);
        // }
        console.log('context不够用啦');
        context.dispatch('demo1', value);
    },

    // 关于为什么设置 context 我们可以在控制台打印这个context ，可以得到他里面含有dispatch ， commit ， store
    // 于是一个有趣的事情发生了，如果第一次在dispatch中进入actions的业务逻辑太过于复杂
    // 我们可以将该函数再添加一个dispatch，传入的值是value，将逻辑分为几个部分

    demo1(context, value) {
        if (context.state.sum % 2) {
            console.log('于是demo来帮忙了');
            context.commit('FUNCTION', value);
        }
    },
}

接着由 actions 中的函数 function(context, value) 执行对逻辑的处理(actions主要对业务逻辑进行处理，方便下一阶段的 mutations 直接根据逻辑处理数据) ，由 actions 中函数的一个 api -- commit('FUNCTION', value) 上传处理好的逻辑和数据至 mutations

3.mutations

mutations 中直接对数据进行处理，mutations(state, value), 其中state是一个对象，它的属性是要处理的数据

const mutations = {
    // state 是一个对象，他的属性是 store 中的数据
    ADDNUM(state, value) {
        state.sum += value;
    },
    SUBNUM(state, value) {
        state.sum -= value;
    },
    ODDADD(state, value) {
        state.sum += value;
    },
    WAITADD(state, value) {
        state.sum += value;
    }
}

这三个阶段返回数据至 state 中，从而达到共享数据的目的

---

actions 中的函数中的 context 参数非常有意思

让我们先看看 context 到底是什么

console.log(context);

可以看到，context中不仅含有上传已处理的业务逻辑的commit

还有可以再次进入actions中的dispatch

我们知道 actions 中的函数主要处理业务逻辑，再直接对接数据给 mutations

当 actions 中的业务逻辑非常复杂的时候，我们可以再通过 context.dispatch() 继续调用 actions中的函数，从而达到一个复杂的业务逻辑进行多层函数多次处理，从而更好维护代码

const actions = {
    oddadd(context, value) {
        context.dispatch('demo', value);
    },
    demo(context, value) {
        if (context.state.sum % 2) {
            context.commit('ODDADD', value);
        }
    },
}

关于actions中的一些小问题，我们可以看到context参数中含有state，这时我们可以直接操作state中的数据sum
我们直接在actions中修改数据，vuex的开发者工具是捕获不到的
当然这样写也可以达到目的，取决于自身情况

const actions = {
    oddadd(context, value) {
        if (context.state.sum % 2) {
            context.state.sum += value;
        }
    },
}

晚安