vuex的模块化

最新推荐文章于 2024-04-28 11:24:59 发布
最新推荐文章于 2024-04-28 11:24:59 发布
阅读量2k 收藏 12
点赞数 4
分类专栏： Vue2 文章标签： vuex 模块化 命名空间
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/124598339
版权

文章目录

多组件共享数据（vuex版）

在这里插入图片描述本例有两个组件，分别是，

  1. Count组件，详见Count.vue。
  2. Person组件，详见Person.vue。

Count组件和Person组件共享以下两个数据：

  1. sum
  2. personList

代码主要涉及如下3个文件，

  1. main.js，本例中不涉及变更。
  2. App.vue，本例不涉及变更。
  3. store/index.js，本例中，会发生多次变更。
  4. Person.vue，本例中，会发生多次变更。
  5. Count.vue，本例中，会发生多次变更。

main.js

import Vue from 'vue'
import App from './App.vue'
import store from "./store";

Vue.config.productionTip = false

const vm = new Vue({
  render: h => h(App),
  store
}).$mount('#app');

console.log(vm);

App.vue

<template>
  <div id="app">
    <Count/>
    <hr>
    <Person/>
  </div>
</template>

<script>
import Count from './components/Count.vue';
import Person from './components/Person.vue';

export default {
  name: 'App',
  components: {
    Count,
    Person
  }
}
</script>
store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    sum:0,
    personList:[
        {id:"001",name:"张三"}
    ]
};

const getters = {
    bigSum(state){
        return state.sum*10;
    }
}

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }

};

const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    },
    ADD_PERSON(state,personObj){
        state.personList.unshift(personObj);
    }
};

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})
Person.vue
<template>
  <div>
      <h2>人员列表</h2>
      <h3 style="color:red">Count组件的当前和为{{sum}}</h3>
      <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 {nanoid} from "nanoid";
export default {
    name:"Person",
    data(){
        return {
            name:""
        }
    },
    computed:{
        personList(){
            return this.$store.state.personList;
        },
        sum(){
            return this.$store.state.sum;
        }
    },
    methods: {
        add(){
            const personObj = {
                id:nanoid(),
                name:this.name
            }
            this.$store.commit("ADD_PERSON",personObj);
            this.name = "";
        }
    }
}
</script>

<style scoped>
button{
    margin-left: 5px;
}
</style>
Count.vue
<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3 style="color:red">Person组件的总人数为{{personList.length}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position","personList"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>

vuex的模块化

  • getters，照旧，不分模块。
    this.$store.getters.bigSum（✔）
    this.$store.getters.countAbout.bigSum （×）

    mapGetters(["bigSum"])（✔）

  • state，分模块。
    this.$store.state.countAbout.sum（✔）
    this.$store.state.personAbout.personList（✔）

    mapState({sum:state=>state.countAbout.sum,personList:state=>state.personAbout.personList})（对象写法）（✔）

    mapState(["countAbout","personAbout"])（数组写法）（✔）

  • actions，照旧，不分模块。
    incrementOdd(){ this.$store.dispatch("jiaOdd",this.num); }（✔）
    incrementWait(){ this.$store.dispatch("jiaWait",this.num); }（✔）

    ...mapActions({ incrementOdd:"jiaOdd", incrementWait:"jiaWait" })（✔）

  • mutations，照旧，不分模块。
    increment(){ this.$store.commit("JIA",this.num); }（✔）
    decrement(){ this.$store.commit("JIAN",this.num); }（✔）

    ...mapMutations({ increment:"JIA", decrement:"JIAN" })（✔）

在这里插入图片描述

store/person/index.js

store下新建文件夹：person，person下新建文件：index.js。
Person组件相关的state、getters、actions、mutations独立成模块并导出。

const state = {
    personList:[
        {id:"001",name:"张三"}
    ]
}

const getters = {}

const actions = {}

const mutations = {
    ADD_PERSON(state,personObj){
        state.personList.unshift(personObj);
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}
store/count/index.js

store下新建文件夹：count，count下新建文件：index.js。
Count组件相关的state、getters、actions、mutations独立成模块并导出。

const state = {
    sum:0
}

const getters = {
    bigSum(state){
        return state.sum*10;
    }
}

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }
}

const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}
store/index.js

Count组件相关的state、getters、actions、mutations独立成模块store/count/index.js；
Person组件相关的state、getters、actions、mutations独立成模块store/person/index.js。
store/index.js中导入以上两个模块，并通过modules聚合，即
new Vuex.Store({modules:{countAbout,personAbout}})。

import Vue from "vue";
import Vuex from "vuex";
import countAbout from "./count";
import personAbout from "./person";

Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})
Person.vue
<template>
  <div>
      <h2>人员列表</h2>
      <h3 style="color:red">Count组件的当前和为{{sum}}</h3>
      <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 {nanoid} from "nanoid";
export default {
    name:"Person",
    data(){
        return {
            name:""
        }
    },
    computed:{
        personList(){
            return this.$store.state.personAbout.personList;
        },
        sum(){
            return this.$store.state.countAbout.sum;
        }
    },
    methods: {
        add(){
            const personObj = {
                id:nanoid(),
                name:this.name
            }
            this.$store.commit("ADD_PERSON",personObj);
            this.name = "";
        }
    },

}
</script>

<style scoped>
button{
    margin-left: 5px;
}
</style>
Count.vue
mapState的对象写法
<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3 style="color:red">Person组件的总人数为{{personList.length}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState({
      sum:state => state.countAbout.sum,
      personList:state => state.personAbout.personList
    }),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>
mapState的数组写法
<template>
  <div class="count">
    <h2>当前求和为{{countAbout.sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3 style="color:red">Person组件的总人数为{{personAbout.personList.length}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["countAbout","personAbout"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>

vuex的模块化+模块带命名空间

  • getters，分模块。
    this.$store.getters["countAbout/bigSum"]（✔）
    this.$store.getters.bigSum （×）
    this.$store.getters.countAbout.bigSum （×）

    mapGetters("countAbout",["bigSum"])（✔）
    mapGetters(["bigSum"]) （×）

  • state，分模块。
    this.$store.state.countAbout.sum（✔）
    this.$store.state.personAbout.personList（✔）

    ...mapState("countAbout",["sum"])（✔）
    ...mapState("personAbout",["personList"])（✔）

    mapState({sum:state=>state.countAbout.sum,personList:state=>state.personAbout.personList})（✔）

    mapState(["countAbout","personAbout"])（✔）

  • actions，分模块。
    incrementOdd(){ this.$store.dispatch("countAbout/jiaOdd",this.num) }（✔）
    incrementWait(){ this.$store.dispatch("countAbout/jiaWait",this.num) }（✔）

    incrementOdd(){ this.$store.dispatch("jiaOdd",this.num); } （×）
    incrementWait(){ this.$store.dispatch("jiaWait",this.num); } （×）

    ...mapActions("countAbout",{ incrementOdd:"jiaOdd", incrementWait:"jiaWait" })（✔）
    ...mapActions({ incrementOdd:"jiaOdd", incrementWait:"jiaWait" }) （×）

  • mutations，分模块。
    increment(){ this.$store.commit("countAbout/JIA",this.num); }（✔）
    decrement(){ this.$store.commit("countAbout/JIAN",this.num); }（✔）
    increment(){ this.$store.commit("JIA",this.num); } （×）
    decrement(){ this.$store.commit("JIAN",this.num); } （×）

    ...mapMutations("countAbout",{ increment:"JIA", decrement:"JIAN" })（✔）
    ...mapMutations({ increment:"JIA", decrement:"JIAN" }) （×）

在这里插入图片描述

store/person/index.js

Person组件相关的state、getters、actions、mutations独立成模块：store/person/index.js，且该模块带命名空间：namespaced:true。

const state = {
    personList:[
        {id:"001",name:"张三"}
    ]
}

const getters = {}

const actions = {}

const mutations = {
    ADD_PERSON(state,personObj){
        state.personList.unshift(personObj);
    }
}

export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}
store/count/index.js

Count组件相关的state、getters、actions、mutations独立成模块：store/count/index.js，且该模块带命令空间：namespaced:true。

const state = {
    sum:0
}

const getters = {
    bigSum(state){
        return state.sum*10;
    }
}

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }
}

const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
}

export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}
store/index.js

带命名空间的模块：

  1. store/person/index.js
  2. store/count/index.js

通过modules在store/index.js中聚合。

import Vue from "vue";
import Vuex from "vuex";
import countAbout from "./count";
import personAbout from "./person";

Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})
Person.vue
<template>
  <div>
      <h2>人员列表</h2>
      <h3 style="color:red">Count组件的当前和为{{sum}}</h3>
      <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 {nanoid} from "nanoid";
export default {
    name:"Person",
    data(){
        return {
            name:""
        }
    },
    computed:{
        personList(){
            return this.$store.state.personAbout.personList;
        },
        sum(){
            return this.$store.state.countAbout.sum;
        }
    },
    methods: {
        add(){
            const personObj = {
                id:nanoid(),
                name:this.name
            }
            this.$store.commit("personAbout/ADD_PERSON",personObj)
            this.name = "";
        }
    }
}
</script>

<style scoped>
button{
    margin-left: 5px;
}
</style>
Count.vue
<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3 style="color:red">Person组件的总人数为{{personList.length}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState("countAbout",["sum"]),
    ...mapState("personAbout",["personList"]),

    ...mapGetters("countAbout",["bigSum"])

    // ...mapState(["countAbout","personAbout"]),

    // ...mapState({
    //   sum:state => state.countAbout.sum,
    //   personList:state => state.personAbout.personList
    // }),

    // sum(){
    //   return this.$store.state.countAbout.sum;
    // },
    // personList(){
    //   return this.$store.state.personAbout.personList;
    // },
    // bigSum(){
    //   return this.$store.getters["countAbout/bigSum"]
    // }
  },
  methods: {
    ...mapActions("countAbout",{
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    
    ...mapMutations("countAbout",{
      increment:"JIA",
      decrement:"JIAN"
    }),

    // incrementOdd(){
    //   this.$store.dispatch("countAbout/jiaOdd",this.num)
    // },
    // incrementWait(){
    //   this.$store.dispatch("countAbout/jiaWait",this.num)
    // },

    // increment(){
    //   this.$store.commit("countAbout/JIA",this.num);
    // },
    // decrement(){
    //   this.$store.commit("countAbout/JIAN",this.num);
    // }
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>
richest_qi
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex 模块化详解
wuxian_wj的博客
12-20 6936
本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。 1.Vuex简单介绍 1.1 Vuex是什么 官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态） Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理
vuex模块化
webblock的博客
12-28 400
当项目包含多个模块，例如：登录模块，商品模块等，每个模块中都含有大量需要组件共享的状态，此时就要用到vuex的模块化管理了。 给项目安装vuex npm install vuex --save 等vuex安装完成，src文件夹下创建store文件夹，store文件夹下是index.js和login.js文件 //index.js import Vue from 'vue' import Vuex from 'vuex' import login from './login.js' Vue.u.
vuex模块化写法
csdnyp的博客
12-07 1270
怎么将vuex模块化
vuex框架使用（框架，模块化）
最新发布
m0_49936845的博客
04-28 1069
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它允许您在应用程序中的组件之间共享和管理状态。即vuex是管理器框架内部图：state：用于存储共享数据（就是所有组件都需要访问的数据，为了方便起见存到state中，这也是vuex的主要功能）mutation：用于数据state的基础操作（如果学过springmvc，相当于持久化层）actions：用于业务流程操作（相当于业务层）
vue - vuex详细讲解和modules模块化的使用
qq_43886365的博客
09-16 4928
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。
Vuex 模块化使用详解
10-16
主要介绍了Vuex 模块化使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vuex模块化demo
08-26
**vuex模块化详解** Vuex 是 Vue.js 的一个官方状态管理库，它提供了一种集中式的存储方式来管理组件间的共享状态，并提供了强大的工具来跟踪状态的变化，从而简化复杂应用的状态管理。在大型 Vue 项目中，随着组件...
深入理解Vuex 模块化(module)
08-29
深入理解Vuex 模块化(module) Vuex 模块化是指将Vuex Store分割成多个模块，每个模块拥有自己的状态、mutation、action、getter等，通过这种方式可以更好地组织和维护项目中的状态树。下面是对Vuex 模块化的详细...
Vuex模块化实现待办事项的状态管理
08-31
Vuex模块化实现待办事项的状态管理 Vuex是一个专门为 Vue.js 应用程序设计的状态管理模式。它使用一个集中式的_store来存储应用程序的状态，通过actions和mutations来更新状态，从而实现了组件之间的数据共享和状态...
Vuex模块化使用
陆仁丶的博客
07-29 2532
一、概览 1、Vuex是什么 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理） 采用集中式存储管理应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化 2、状态 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 ) 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理） 3、什么情况下使用Vuex 多个视图（组件）依赖同一状态 来自不同视图（组件）的行为需要变更同一状态 二、Vuex核心概念 1、store：类似容器
【Vuex深入以及模块化编码】
小田是个程序员的博客欢迎你的到来呀~
03-19 1876
Vuex的深入理解，你值得拥有，头发可不能让他白掉呀！宝贝
Vuex模块化管理
文龙刚的博客
07-26 510
【代码】Vuex模块化管理。
Vuex 模块化写法
sjxgghg的博客
08-24 551
在store文件夹下，把不同功能的模块放在不同的js文件中。在文件中，导入count.js和的代码内容在，给不同的模块取名：countAbout，personAbout；
Vuex--module(模块化)--使用/教程/实例
IT利刃出鞘的博客
01-29 1813
本文用示例介绍Vuex的五大核心之一：module。
VueX模块化教程：详解与示例
VueX模块化设计是解决大型Vue应用状态管理的有效手段，它让状态管理变得有序且易于维护。通过定义模块和在组件中使用mapState，我们可以轻松地管理每个模块的状态，保持代码的整洁和可读性。对于初学者来说，理解并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值