vue--vuex--模块化编码

已于 2022-07-10 17:31:28 修改
阅读量352 收藏
点赞数
分类专栏： 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>
春风霓裳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex中的模块化开发
weixin_41989717的博客
12-10 543
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 809
Vuex多模块namespaced：true 失效问题，以及拦截器与actions的异步请求有时出错探讨
vuex模块化
Liberty_yes的博客
02-10 6039
将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
vuex的模块化
措手不及ya的博客
09-04 575
vuex模块化学习
vue常用之状态管理的vuex的“模块化编码“
空投在我怀里的博客
03-14 194
一、目的：让代码更好维护，让多种数据分类更加明确。 二、修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced.
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
vue-native-websocket:带有vuex集成的本地websocket
05-02
vue-native-websocket· Vuejs 2和Vuex的本地websocket实现安装yarn add vue-native-websocket# ornpm install vue-native-websocket --save用法配置通过URL字符串自动进行套接字连接import VueNativeSock from 'vue...
Vue-Vue-Router-Vuex-SSR:Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
05-16
Vue-Vue-Router-Vuex-SSRVue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
mall-manage-system:vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts实现电商管理系统后台
03-11
vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts 2，测试账号地址 访问地址：待建设 账号：admin密码：admin 账号：xiaoxiao密码：xiaoxiao 因为菜单是根据不同用户权限动态生成的，所以...
VUE Vue-Router Vue-Resource Vuex技术栈练习demo
10-17
基于vue-cli脚手架，VUE Vue-Router Vue-Resource Vuex技术栈练习demo，需要有一定的html css js vue npm 基础。 安装： npm install npm install vue-router -g npm install vue-resource -g npm install vuex -g ...
Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）
小帅的编程笔记
11-23 1092
在上一篇笔记中：Vuex 4源码学习笔记 - Store 构造函数都干了什么（四） 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情： 初始化一些内部变量以外 执行installModule来初始化module以及子module， 执行resetStoreState函数通过Vue3的reactive使store的状态实现“响应式”）。 今天我们我们通过官方的购物车示例来查看Vuex内部的工作流程，示例代码在examples/composition/shopping-cart文件夹内 Vu
vuex 中dispatch 和 commit
weixin_55932347的博客
07-21 1041
需要注意的是，在 Vuex 中，actions 中不能直接修改 state 的状态，只能通过触发 mutations 来修改 state 的状态。方法用于触发 mutations，它接收一个 mutation 的 type 和 payload 作为参数。都是用于触发 Vuex 中的 actions 和 mutations 的方法，但是它们的作用和用法略有不同。方法用于触发 actions，它接收一个 action 的 type 和 payload 作为参数。需要注意的是，在组件中使用。
vuex模块化写法
csdnyp的博客
12-07 1236
怎么将vuex模块化
学习笔记：Vuex及Vuex模块化
weixin_58257357的博客
04-01 746
一.什么是Vuex? Vuex就是一个仓库，用来集中化管理所有组件的状态，它能够完成任意组件间的数据共享，他就像一个公用的大仓库，包含了所有组件的数据，可以供任意组件使用，虽然过程有些繁琐，但是搭建好之后会让你的思路国家顺畅，结构更加清晰，最重要的是代码会易于维护。 二.安装vuex（） 1. npm i vuex@'版本号'====>这里大家一定要注意，下载vuex一定要下在对应vue版本的，即 vue2----vuex3 Vue3---vuex4...
vue中在vuex里面的this.$store.dispatch方法
weixin_49826079的博客
02-24 2823
vuex中如何模块化使用this.$store.dispatch（）方法
Vue2.0 Vuex Vuex模块化+namespace
yasinawolaopo的博客
01-06 1144
模块化非常重要，里面还带有Actions网络请求
Vuex之模块化+命名空间
niulinbiao的博客
08-06 709
文章预览一、目的二、配置三、使用3.1、开启命名空间后，组件中读取state数据：3.2、开启命名空间后，组件中读取getters数据：3.3、开启命名空间后，组件中调用dispatch3.4、开启命名空间后，组件中调用commit 一、目的 让代码更好维护，让多种数据分类更加明确。 二、配置 修改store.js 注意要开启命名空间 namespaced:true const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, muta
vuex中actions调用其他模块的actions、commit等
AzeShinja的博客
02-09 1660
vuex如何调用其他模块的内容
vue问题报错：vuex.esm.js?e165:497 [vuex] unknown action type: getDetailInfo
weixin_52417514的博客
09-18 1930
vue问题报错：vuex.esm.js?e165:497 [vuex] unknown action type: getDetailInfo
vue-pubilc-layer监听vuex
最新发布
09-03
Vue-Public-Layer是一个Vue插件，用于在Vue应用中监听Vuex状态的变化。通过在Vue组件中使用该插件提供的公共层，我们可以方便地观察Vuex store的变化，并在状态发生改变时执行相应的逻辑。 在Vue组件内使用vue-public-layer，我们需要首先在组件的data中声明要监听的Vuex状态，例如： ``` data() { return { count: this.$publicLayer.getters['counter/getCount'] } }, ``` 在上面的例子中，我们声明了一个count变量，并使用vue-public-layer提供的getters方法来获取Vuex store中counter模块下的count状态。 接着，我们可以在组件的methods或computed中使用这个变量来对Vuex状态的变化进行响应。例如： ``` methods: { increment() { this.$publicLayer.commit('counter/increment') }, decrement() { this.$publicLayer.commit('counter/decrement') } } ``` 在上面的例子中，我们使用vue-public-layer提供的commit方法来提交Vuex mutations，来改变相应的状态。 通过这种方式，我们就可以在Vue组件中监听Vuex状态的变化，并执行相应的操作。vue-public-layer的使用使得我们更加灵活地控制Vuex store，使得我们可以更好地实现状态的管理和响应。 总结起来，vue-public-layer是一个能够监听Vuex状态变化的Vue插件，通过在Vue组件中使用该插件提供的公共层，我们可以方便地观察Vuex store的变化，并在状态发生改变时执行相应的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值