vuex模块化，以及如何借助mapActions,mapMutations生成对应的方法

小付学代码

已于 2022-08-17 09:42:25 修改

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签：前端 vue.js javascript

于 2022-07-05 20:59:11 首次发布

本文链接：https://blog.csdn.net/ONLYSRY/article/details/125624078

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

vuex的index.js【原版写法】

//改文件用于创建Vuex中最为核心的store
 
//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//准备actions - 用于响应组件中的动作
const actions = {
    // add与reduce的调用也仅此为了传递commit给mutations。
    // 所以我们前边直接使用了 this.$store.commit  根本不需要经过actions
 
    // add(context, value) {
    //     context.commit('ADD', value)
    // },
    // reduce(context, value) {
    //     context.commit('SUB', value)
    // },
    jishujia: function (context, value) {
        if (context.state.sum % 2 == 1) {
            console.log("actions里的jia调用");
            context.commit('JIUSHUJIA', value)
        }
    },
    waitjia: function (context, value) {
        setTimeout(() => {
            console.log("actions里的jia调用");
            context.commit('WAITJIA', value)
        }, 500);
    }
}
//准备mutations- 用于操作数据(state)
const mutations = {
    JIA(state, value) {
        state.sum += value
        console.log("commit中的JIA调用")
    },
    JIAN(state, value) {
        state.sum -= value
        console.log("commit中的JIAN调用")
    },
    JIUSHUJIA(state, value) {
        state.sum += value
        console.log("commit中的JIUSHUJIA调用")
    },
    WAITJIA(state, value) {
        state.sum += value
        console.log("commit中的WAITJIA调用")
    },
    ADD_PERSON(state, value) {
        state.personlist.unshift(value)
        console.log("commit中的ADD_PERSON调用")
    }
}
//准备state - 用于存储数据
const state = {
    sum: 2,//初始数据为0
    personlist: [
        { id: '001', name: '张三' }
    ],
}
 
//1.使用插件
Vue.use(Vuex)
 
//2.创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

vuex的index.js【模块化写法】

//改文件用于创建Vuex中最为核心的store

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'


//求和相关的配置
const countOptions = {
    namespaced: true,
    actions: {
        jishujia: function (context, value) {
            if (context.state.sum % 2 == 1) {
                console.log("actions里的jia调用");
                context.commit('JIUSHUJIA', value)
            }
        },
        waitjia: function (context, value) {
            setTimeout(() => {
                console.log("actions里的jia调用");
                context.commit('WAITJIA', value)
            }, 500);
        }

    },
    mutations: {
        JIA(state, value) {
            state.sum += value
            console.log("commit中的JIA调用")
        },
        JIAN(state, value) {
            state.sum -= value
            console.log("commit中的JIAN调用")
        },
        JIUSHUJIA(state, value) {
            state.sum += value
            console.log("commit中的JIUSHUJIA调用")
        },
        WAITJIA(state, value) {
            state.sum += value
            console.log("commit中的WAITJIA调用")
        }

    },
    state: {
        sum: 2,//初始数据为0

    },
    getters: {

    }
}

//人员管理相关的配置
const personOptions = {
    namespaced: true,
    actions: {

    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personlist.unshift(value)
            console.log("commit中的ADD_PERSON调用")
        }

    },
    state: {
        personlist: [
            { id: '001', name: '张三' }
        ],

    },
    getters: {

    }
}

//1.使用插件
Vue.use(Vuex)

//2.创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

把该放的东西放到固定位置：并加上命名空间：【namespaced: true】

//人员管理相关的配置

const personOptions = {

namespaced: true,

actions: { },

mutations: { },

state: {},

getters: { }

}

其次我们引入了两个管理配置名：countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions，Mutations，State。必须加入一层关系，vue执行时就会疑惑，你到底要找countAbout下的配置项还是personAbout下的，所以前边的写法也得改。

        countAbout: countOptions,
        personAbout: personOptions

Count.vue组件：

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h1 style="color: red">Person组件列表的总人数为{{ personlist.length }}</h1>
    <select v-model="number">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add(number)">+</button>
    <button @click="reduce(number)">-</button>
    <button @click="odd_add(number)">当前求和为奇数再加</button>
    <button @click="wait(number)">等2s再显示数据</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      number: 1, //用户选择的数字
    };
  },
  computed: {
    ...mapState("countAbout", ["sum"]),
    ...mapState("personAbout", ["personlist"]),
  },
  methods: {
    // add() {
    //   this.$store.commit("JIA", this.number);
    // },
    // reduce() {
    //   this.$store.commit("JIAN", this.number);
    // },
    // odd_add() {
    //   this.$store.dispatch("jishujia", this.number);
    // },
    // wait() {
    //   this.$store.dispatch("waitjia", this.number);
    // },

    //上边为旧的实现方式  --- 下边为新的写法

    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutation(对象写法)
    ...mapMutations("countAbout", { add: "JIA", reduce: "JIAN" }),
    //借助mapActions生成对应的方法,方法中会调用dispathch去联系actions(对象写法)
    ...mapActions("countAbout", { odd_add: "jishujia", wait: "waitjia" }),
  },
};
</script>

<style lang="css" scoped>
button {
  margin-left: 5px;
}
</style>

这里需要关注的重点为：

  computed: {
    ...mapState("countAbout", ["sum"]),
    ...mapState("personAbout", ["personlist"]),
  },

1.前边直接加入了 a（countAbout）：sum，b（personAbout）：personlist，其中前边的a，b就是我们写配置项时为了区分每一个模块而单独写的名字。所以第一个mapstate找的这个sum就是countAbout中的，这样详细区分，项目庞大时也能很清楚的找到自己需要改的地方。

 methods: {
    // add() {
    //   this.$store.commit("JIA", this.number);
    // },
    // reduce() {
    //   this.$store.commit("JIAN", this.number);
    // },
    // odd_add() {
    //   this.$store.dispatch("jishujia", this.number);
    // },
    // wait() {
    //   this.$store.dispatch("waitjia", this.number);
    // },

    //上边为旧的实现方式  --- 下边为新的写法

    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutation(对象写法)
    ...mapMutations("countAbout", { add: "JIA", reduce: "JIAN" }),
    //借助mapActions生成对应的方法,方法中会调用dispathch去联系actions(对象写法)
    ...mapActions("countAbout", { odd_add: "jishujia", wait: "waitjia" }),

2.methods里边借助了mapActions与mapMutations生成对应的方法，但是前边也应该通知自己寻找的是countAbout下的还是personAbout下的，参照注释来看能够理解的更快。

    <button @click="add(number)">+</button>
    <button @click="reduce(number)">-</button>
    <button @click="odd_add(number)">当前求和为奇数再加</button>
    <button @click="wait(number)">等2s再显示数据</button>

3.如果点击事件这里不自己传这个number值，将会默认把value值传进去，而这个value值是一个鼠标事件，所以就会发生这个奇怪的bug，可以自己尝试一下。

Person组件：

<template>
  <div>
    <h1>人员列表</h1>
    <h1 style="color: red">Count组件列表的求和为{{ sum }}</h1>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personlist" :key="p.id">
        {{ p.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    // personlist() {
    //   return this.$store.state.personlist;
    // },
    ...mapState("personAbout", ["personlist"]),
    ...mapState("countAbout", ["sum"]),
  },
  methods: {
    add() {
      const personobj = { id: nanoid(), name: this.name };
      console.log(personobj);
      this.name = " ";
      this.$store.commit("personAbout/ADD_PERSON", personobj);
    },
  },
};
</script>

<style>
</style>

这里有一个很奇怪的写法：personAbout/ADD_PERSON 而不是personAbout.ADD_PERSON

this.$store.commit("personAbout/ADD_PERSON", personobj);

但是如果说这里要使用正常写法而不是生成的话

computed: {
    // personlist() {
    //   return this.$store.state.personlist;
    // },
    ...mapState("personAbout", ["personlist"]),
    ...mapState("countAbout", ["sum"]),
  },

// return this.$store.state.personAbout.personlist; 找到state下的【personAbout】或者【countAbout】然后才能查找下一级。

还是自己调试一下看看，才能发现更多的问题。

小付学代码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vuex模块化，以及如何借助mapActions,mapMutations生成对应的方法

vuex的index.js【模块化写法】把该放的东西放到固定位置：并加上命名空间：【namespaced: true】其次我们引入了两个管理配置名：countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions，Mutations，State。必须加入一层关系，vue执行时就会疑惑，你到底要找countAbout下的配置项还是personAbout下的，所以前边的写法也得改。Count.vue组件：这里需要关注的重点为：1.前边
复制链接

扫一扫

专栏目录