store使用module简单配置与使用

准备工作

npm i vuex -S
npm i vuex-persistedstate 持续化存储

main.js配置

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/index.js";

createApp(App).use(store).mount("#app");

store部分

index.js

// npm i vuex-persistedstate 持续化存储
import { createStore } from "vuex";
import user from "../store/modules/user.js";
// 持久化存储
import persistedstate from "vuex-persistedstate";

// export default store
export default createStore({
  state: {
    num: 10,
    num2: 2,
    str: "store数据",
  },
  getters: {
    num: (state) => state.num,
    // total(state) {
    //   return state.num + state.num2;
    // },
  },
  mutations: {
    num(state, num) {
      state.num = num;
    },
    changeNum(state) {
      state.num = 100;
    },
  },
  actions: {
    changeBtn() {
      alert("actions");
    },
  },
  modules: { user },
  plugins: [
    persistedstate({
      key: "vuex-store",
      paths: ["user"],
    }),
  ],
});

module中user.js

export default {
  namespaced: true,
  state: {
    num: 100,
    str: "store数据",
  },
  getters: {
    getterNum: (state) => state.num + 2,
  },
  mutations: {
    changeNum(state, payLoad) {
      state.num = state.num - payLoad.number;
    },
  },
  actions: {
    changeBtn() {
      alert("user");
    },
  },
};

组件调用

<template>
  <div class="hello">
    state:{{ num }} getters:{{ getterNum }}
    <!-- <button @click="btn">触发mutation</button> -->
    <button @click="changeNum({ number: 2 })">触发mutation</button>
    <button @click="btn2">触发action</button>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      store: useStore(),
    };
  },
  mounted() {},
  computed: {
    // num() {
    //   return this.store.state.user.num;
    // },
    // getterName() {
    //   return this.store.getters[`user/num`];
    // },
    ...mapState("user", { num: (state) => state.num }),
    ...mapGetters("user", ["getterNum"]),
  },
  methods: {
    // btn() {
    //   this.store.commit("user/changeNum", { number: 2 });
    // },
    ...mapMutations("user", ["changeNum"]),
    // btn2() {
    //   this.store.dispatch("user/changeBtn");
    // },
    ...mapActions("user", {
      btn2: "changeBtn",
    }),
  },
};
</script>