vuex模块化，小案例

1.模块化

const state = {
  count: 1
};

const mutations = {
  increment(state, n) {
    //n为载荷
    state.count += n;
  },
  decrement(state) {
    state.count--;
  }
};

const actions = {
  add1(context, n) {
    // context:上下文
    // 触发mutation里面的increment来改变state
    context.commit("increment", n);
  },
  // 按需传值
  decrement({ commit, state }) {
    console.log(state.count); //获取当前状态
    commit("decrement");
  }
};

const getters = {
  desc(state) {
    if (state.count < 50) {
      return "吃饭";
    } else if (state.count < 100) {
      return "睡觉";
    } else {
      return "打豆豆";
    }
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

---

2.引用模块

import Vue from "vue";
import Vuex from "vuex";
import home from "./modules/home";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    home,
  },
});

---

 

3.组件中使用值

<template>
  <div class="home">
    <button @click="sub">-</button>
    <!-- {{ $store.state.count }} -->
    {{ $store.state.home.count }}
    <button @click="add">+</button>

    派生：{{ $store.getters.desc }}
  </div>
</template>

<script>
export default {
  methods: {
    add() {
      // this.$store.commit('increment', 10);
      this.$store.dispatch('add1', 5);
    },
    sub() {
      // this.$store.commit('decrement');
      this.$store.dispatch('decrement');
    },
  },
};
</script>