vue--vuex--模块化编码

已于 2022-07-10 17:31:28 修改
阅读量386 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-07-10 16:53:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43470725/article/details/125707413
版权

将store中的index.js的actions、mutations、state、getters分类

// 求和功能相关的配置
const countOptions ={
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}
// 人员管理功能相关的配置
const personOptions ={
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}

namespaced:true

当使用这种简写是，需要配置上加上：namespaced:true
在这里插入图片描述

当是同模块化时：

** 使用map自动生成数据简写：**

...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
 ...mapGetters('countAbout',['bigSum'])

**方法简写：**

    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

自己通过$store调用

 computed: {
    personList(){
        return this.$store.state.personAbout.personList
    },
    // ...mapState(['personList']),
    sum(){
        return this.$store.state.countAbout.sum
    },
    firstPersonName(){
        return this.$store.getters['personAbout/firstPersonName']
    }

  },
  methods:{
    add(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.commit('personAbout/ADD_PERSON',personObj)
        console.log(personObj)
    },
    addWang(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personObj)
        console.log(personObj)
    }
  },
};

自己通过$store调用 : state、commit、getters

this.$store.state.countAbout.sum
 this.$store.getters['personAbout/firstPersonName']
this.$store.dispatch('personAbout/addPersonWang',personObj)
 this.$store.commit('personAbout/ADD_PERSON',personObj)

在这里插入图片描述

在这里插入图片描述

count组件借助map自动生成相关属性和方法：

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <h1>当前求和放大10倍为：{{bigSum}}</h1>
    <h1>我在{{school}},学习{{subject}}</h1>
    <h3 style="color:red">person组件的总人数是{{personList.length}}</h3>
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>

     <!-- <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaOdd(n)">当前求和为奇数再加</button>
    <button @click="jiaWait(n)">等一等再加</button> -->
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    // 程序员亲自写方法
    // increment() {
    //   this.$store.commit("JIA", this.n);
    // },
    // decrement() {
    //   this.$store.dispatch("JIAN", this.n);
    // },
    // 借助mapMutations生成对应的方法，方法中会调用ocmmit去联系mutation(对象写法)
    // ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    // 借助mapMutations生成对应的方法，方法中会调用ocmmit去联系mutation(数组写法)
    // ...mapMutations(['JIA','JIAN']),
    /* *********************************************** */ 
    // incrementOdd() {
    //   this.$store.dispatch("jiaOdd", this.n);
    // },
    // incrementWait() {
    //   this.$store.dispatch("jiaWait", this.n);
    // },
    // ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    // ...mapActions(['jiaOdd','jiaWait'])
  },
  computed: {
      // 靠程序员亲自去写计算属性
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // 借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    // 数组写法
    // ...mapState(['sum','school','subject','personList']),
    // ...mapState(['countAbout','personAbout']),
    ...mapState('countAbout',['sum','school','subject']),
    ...mapState('personAbout',['personList']),
    /* ****************************************** */ 
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },
    // ...mapGetters({bigSum:'bigSum'})
    // ...mapGetters(['bigSum'])
    ...mapGetters('countAbout',['bigSum'])
  },
};
</script>
<style long="css">
button {
  margin-left: 5px;
}
</style>

person组件通过$store自己调用生成相关属性和方法：

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">count组件的求和为：{{sum}}</h3>
    <h3 style="color:red">列表中第一个人的名字是：{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name"/>
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</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.personAbout.personList
    },
    // ...mapState(['personList']),
    sum(){
        return this.$store.state.countAbout.sum
    },
    firstPersonName(){
        return this.$store.getters['personAbout/firstPersonName']
    }

  },
  methods:{
    add(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.commit('personAbout/ADD_PERSON',personObj)
        console.log(personObj)
    },
    addWang(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personObj)
        console.log(personObj)
    }
  },
};
</script>
<style scoped>
</style>

store的index.js

// 该文件用于创建vuex中的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 求和功能相关的配置
const countOptions = {
    namespaced:true,
    actions: {
        jia(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIA', value)
        },
        jian(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIAN', value)
        },
        jiaOdd(context, value) {
            // console.log("action中的jiaOdd被调用了",context,value)
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            // console.log("action中的jiaWait被调用了",context,value)
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            // console.log("mutations中的JIA被调用了",state,value)
            console.log('$$$$$', value);
            state.sum += value
        },
        JIAN(state, value) {
            // console.log("mutations中的JIAN被调用了",state,value)
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
// 人员管理功能相关的配置
const personOptions = {
    namespaced:true,
    actions: {},
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {}
}


// // 准备actions--用于响应组件中的动作
// const actions = {

// }
// // 准备mutations--用于操作数据
// const mutations = {



// }
// // 准备state--用于存储数据
// const state = {


// }
// // 准备getters--用于将status中的数据进行加工
// const getters = {

// }

Vue.use(Vuex)

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

结果：

在这里插入图片描述

优化index.js 将不同的分类创建不同的文件，然后引入

count.js

// 求和功能相关的配置
export default {
    namespaced: true,
    actions: {
        jia(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIA', value)
        },
        jian(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIAN', value)
        },
        jiaOdd(context, value) {
            // console.log("action中的jiaOdd被调用了",context,value)
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            // console.log("action中的jiaWait被调用了",context,value)
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            // console.log("mutations中的JIA被调用了",state,value)
            console.log('$$$$$', value);
            state.sum += value
        },
        JIAN(state, value) {
            // console.log("mutations中的JIAN被调用了",state,value)
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

person.js

// 人员管理功能相关的配置
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            }else{
                alert('添加的人必须姓王')
            }
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}

index.js

// 该文件用于创建vuex中的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'

import countOptions from './count'
import personOptions from './person'


// // 准备actions--用于响应组件中的动作
// const actions = {

// }
// // 准备mutations--用于操作数据
// const mutations = {



// }
// // 准备state--用于存储数据
// const state = {


// }
// // 准备getters--用于将status中的数据进行加工
// const getters = {

// }

Vue.use(Vuex)

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

在action中发起网络请求

import axios from "axios"
import { nanoid } from 'nanoid'

addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }

<button @click="addPersonServer">添加一个,名字随机</button>

 addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
    }

person.js

// 人员管理功能相关的配置
import axios from "axios"
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王')
            }
        },
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}

person组件

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">count组件的求和为：{{sum}}</h3>
    <h3 style="color:red">列表中第一个人的名字是：{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name"/>
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个,名字随机</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.personAbout.personList
    },
    // ...mapState(['personList']),
    sum(){
        return this.$store.state.countAbout.sum
    },
    firstPersonName(){
        return this.$store.getters['personAbout/firstPersonName']
    }

  },
  methods:{
    add(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.commit('personAbout/ADD_PERSON',personObj)
        console.log(personObj)
    },
    addWang(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personObj)
        console.log(personObj)
    },
    addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
    }
  },
};
</script>
<style scoped>
</style>
春风霓裳
关注
专栏目录
vuex中的模块化开发
weixin_41989717的博客
12-10 599
1.模块化，每个模块拥有自己的state、mutation、action、getter const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const stor
运用Vuex进行分模块开发，dispatch(‘xxx/xxx‘,{})失效问题，以及拦截器与actions的异步请求有时出错探讨
c1379l的博客
05-26 954
Vuex多模块namespaced：true 失效问题，以及拦截器与actions的异步请求有时出错探讨
vuex模块化
Liberty_yes的博客
02-10 6256
将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
vuex的模块化
措手不及ya的博客
09-04 815
vuex模块化学习
vue常用之状态管理的vuex的“模块化编码“
空投在我怀里的博客
03-14 216
一、目的：让代码更好维护，让多种数据分类更加明确。 二、修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced.
基于 vue、vue-router、vuex、axios、element-ui、ESLint、ES6.zip
11-04
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发、轻量级和高效著称。在"基于 vue、vue-router、vuex、axios、element-ui、ESLint、ES6"的项目中，我们可以看到一系列核心技术和工具的组合，用于构建复杂的...
vue-cli.rar
12-24
2. **插件机制**：Vue CLI 支持安装和管理各种插件，如Vuex、Vue Router、Webpack等，这使得在项目中集成常见功能变得简单。 3. **热更新**：利用Webpack的热模块替换（HMR）特性，Vue CLI 可以在代码修改后实时...
vue-mail-maps:Vue.js项目
05-24
- `store` 包含Vuex的状态管理模块。 - `views` 用于组织不同的页面视图。 - `App.vue` 应用的主组件。 - `main.js` 项目入口文件，用于初始化Vue实例和加载其他依赖。 - `public` 存放静态资源，如HTML模板、...
基于vue、vue-router、vuex、axios、element-ui、ESLint、ES6的电商网项目.zip
10-21
Vue.js的核心思想是组件化开发，它允许开发者将UI拆分成可复用的独立部分，每个部分都有自己的数据和逻辑。Vue.js还提供了响应式数据绑定、指令系统、生命周期钩子等功能，使得开发过程更加便捷。 **vue-router** ...
vue-vuex-router-master.zip
06-18
2. `main.js`：应用的入口文件，通常在这里初始化Vue实例，引入Vue Router和Vuex，并进行全局设置。 3. `vue.config.js`（如果存在）：Vue CLI的配置文件，可以用来自定义构建设置，比如调整输出目录、公共路径、...
Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）
小帅的编程笔记
11-23 1148
在上一篇笔记中：Vuex 4源码学习笔记 - Store 构造函数都干了什么（四） 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情： 初始化一些内部变量以外 执行installModule来初始化module以及子module， 执行resetStoreState函数通过Vue3的reactive使store的状态实现“响应式”）。 今天我们我们通过官方的购物车示例来查看Vuex内部的工作流程，示例代码在examples/composition/shopping-cart文件夹内 Vu
vuex 中dispatch 和 commit
weixin_55932347的博客
07-21 1330
需要注意的是，在 Vuex 中，actions 中不能直接修改 state 的状态，只能通过触发 mutations 来修改 state 的状态。方法用于触发 mutations，它接收一个 mutation 的 type 和 payload 作为参数。都是用于触发 Vuex 中的 actions 和 mutations 的方法，但是它们的作用和用法略有不同。方法用于触发 actions，它接收一个 action 的 type 和 payload 作为参数。需要注意的是，在组件中使用。
前端vuex中dispatch的使用
qq_41148615的博客
02-27 3532
Vuex中dispatch的用法！Vuex是专为Vue.js应用程序开发的状态管理模式。this.$store.dispatch是用于触发vuex中action的方法。
vuex模块化写法
csdnyp的博客
12-07 1306
怎么将vuex模块化
学习笔记：Vuex及Vuex模块化
weixin_58257357的博客
04-01 1032
一.什么是Vuex? Vuex就是一个仓库，用来集中化管理所有组件的状态，它能够完成任意组件间的数据共享，他就像一个公用的大仓库，包含了所有组件的数据，可以供任意组件使用，虽然过程有些繁琐，但是搭建好之后会让你的思路国家顺畅，结构更加清晰，最重要的是代码会易于维护。 二.安装vuex（） 1. npm i vuex@'版本号'====>这里大家一定要注意，下载vuex一定要下在对应vue版本的，即 vue2----vuex3 Vue3---vuex4...
vue中在vuex里面的this.$store.dispatch方法
weixin_49826079的博客
02-24 3027
vuex中如何模块化使用this.$store.dispatch（）方法
关于vuex 的模块开发和使用(二）
最新发布
weixin_45379180的博客
05-20 247
调试的时候，不刷新页面，config.js只能触发一次，但是request.js里面这个请求方法每次都会触发，所以在request.js里把修改的cb_lang加上就会及时触发，这样调用接口后，后端就可以返回不同的语言数据了。方法前面加了 模块的名字：这样方便我们操作且清晰：源于 一个属性 namespaced: true,注意：在commit 和 dispatch 的时候对模块内的操作可以通过。由此开题：commit 是 同步修改，dispatch 是异步操作。1.切换语言请求头语言不改变。
Vue2.0 Vuex Vuex模块化+namespace
yasinawolaopo的博客
01-06 1212
模块化非常重要，里面还带有Actions网络请求
Vuex之模块化+命名空间
niulinbiao的博客
08-06 765
文章预览一、目的二、配置三、使用3.1、开启命名空间后，组件中读取state数据：3.2、开启命名空间后，组件中读取getters数据：3.3、开启命名空间后，组件中调用dispatch3.4、开启命名空间后，组件中调用commit 一、目的 让代码更好维护，让多种数据分类更加明确。 二、配置 修改store.js 注意要开启命名空间 namespaced:true const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, muta
Vue-CLI详解：搭建、使用与原理探索
Vue CLI的其他特性还包括热模块替换（HMR）以实现快速的开发迭代，预设的代码质量和性能优化策略，以及对TypeScript、PWA（渐进式 web 应用）等现代Web技术的支持。通过Vue CLI，开发者能够充分利用Vue生态系统的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值