vuex进阶使用

最新推荐文章于 2024-09-20 22:35:21 发布
最新推荐文章于 2024-09-20 22:35:21 发布
阅读量513 收藏 3
点赞数
分类专栏： 大前端-vue 文章标签： vuex vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jx950915/article/details/93299153
版权

接上文：vue-cli简单使用vuex

因为最近在对项目进行重构工作，所以就慢慢抽离了一些模块，最早做的就是重构了vuex模块，我发现我写的太垃圾了，我自己都看不下去了。所以在对vuex深入了解之后就动手把vuex模块无缝重构了，下面就是我在实验vuex的一些体会。

抽离层级

在上一篇文章中我们就发现我们的store文件就一个，这明显就不利于协助开发和维护，所以我们首先就是抽离store中各个模块的依赖。
目录

store
	|__modules
			|__module1.js
	|__index.js
	|__getters.js
	|__mutations.js
	|__actions.js
	|__state.js

实际代码
state.js

export default {
    count: 0
}

actions.js

export default{
    title:state=>{
        return 'StoreDemo'
    }
}

mutations,js

export default {
    increase(state) {
        state.count++
    },
    subtract(state) {
        state.count--
    }
}

getters.js

export default{
    title:state=>{
        return 'StoreDemo'
    }
}

index

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// root级别的store
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

storeDemo.vue

<template>
    <div id="vuex">
    	{{title}}
        <button @click="subtract">-</button>
        {{count}}
        <button @click="add">+</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // count:store.state.count
        };
    },
    computed: {
        count() {
            return this.$store.state.count;
        },
        //title
        title(){
            return this.$store.getters.title
        }
    },
    methods: {
        // 分发 Action
        add() {
            this.$store.dispatch("actionIncrease");
        },
        subtract() {
            this.$store.dispatch("actionSubtract");
        }
    }
};
</script>

效果
在这里插入图片描述
总结
这里获取store使用了两种方式，一种是存储于state数据中，一种是通过getters方法获取，所以其实我们获取count也可以通过一个getters方法获取
getters.js

export default{
    title:state=>{
        return 'StoreDemo'
    },
    getCount:state=>{
        return state.count
    }
}

storeDemo.vue

count(){
   	return this.$store.getters.getCount;
   	//return this.$store.state.count;
},

在这里插入图片描述

Modules

实际项目中我们会把项目分为多个模块，所以为了配合开发，我们的store数据也应该分为各个对应的模块，所以我们前面的目录中模块就有作用了。
module1.js

const state = {
    students: [{
        name: '小明',
        age: 16

    }, {
        name: '小红',
        age: 18

    }, {
        name: '小夫',
        age: 15

    }, { name: '小陈', age: 16 }],
    filterStudents: [],
    title: 'Students'
}

const getters = {
    //获取年龄最大的学生
    maxAge(state) {
        let student = state.students[0];
        state.students.forEach(element => {
            student = element.age > student.age ? element : student
        });
        return student.name
    },
    //获取筛选后的所有学生
    getFilterStudents(state) {
        return state.filterStudents
    }
}
const actions = {
    //获取未成年
    getMinorStudents({ state, commit }) {
        let students = state.students.filter(element => {
            return element.age < 18;
        })
        students = students || []
        console.log(students)
        commit('getMinorStudents', students)
    },
    //获取成年人
    getAdultStudents({ state, commit }) {
        let students = state.students.filter(element => {
            return element.age >= 18;
        })
        students = students || []
        console.log(students)
        commit('getAdultStudents', students)
    },


}
const mutations = {
    getMinorStudents(state, list) {
        state.filterStudents = list;
    },
    getAdultStudents(state, list) {
        state.filterStudents = list;
    },
    // 设置标题
    setTitle(state, name) {
        state.title = name
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

index,js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// root级别的store
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'


// modules
import module1 from './modules/module1'

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    //模块
    modules:{
        module1
    }
})

storeDemo.vue


<template>
    <div id="vuex">
        {{title}}
        <button @click="subtract">-</button>
        {{count}}
        <button @click="add">+</button>

        <p>{{moduleTitle}}</p>
        <p>年龄最大的人:{{maxAge}}</p>
        <button @click="getAdultStudents">获取成年人</button>
        <button @click="getMinorStudents">获取未成年人</button>
        <button @click="setTitle">修改标题</button>
        <ul>
            <p v-if="students.length==0">暂无数据</p>
            <li v-for="(item,key) in students" :key="key">姓名:{{item.name}},年龄：{{item.age}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // count:store.state.count
        };
    },
    computed: {
        // count() {
        //     return this.$store.state.count;
        // },
        count() {
            return this.$store.getters.getCount;
        },
        title() {
            return this.$store.getters.title;
        },
        //模块标题
        moduleTitle() {
            return this.$store.state.module1.title;//这里因为是module中的数据，要带上module名
        },
        //年龄最大的学生
        maxAge() {
            return this.$store.getters.maxAge;
        },
        //被筛选过后的数据
        students() {
            return this.$store.getters.getFilterStudents;
        }
    },
    methods: {
        // 分发 Action
        add() {
            this.$store.dispatch("actionIncrease");
        },
        subtract() {
            this.$store.dispatch("actionSubtract");
        },
        // 获取未成年人
        getMinorStudents() {
            this.$store.dispatch("getMinorStudents");
        },
        //获取成年人
        getAdultStudents() {
            this.$store.dispatch("getAdultStudents");
        },
        //因为没有action事件，所以我们用commit方法分发事件
        setTitle(){
            this.$store.commit('setTitle','修改后的标题')
        }
    }
};
</script>

效果
在这里插入图片描述
命名空间：namespaced
这里用实际情况解释一下命名空间这个属性
module1.js

export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

加上这个之后就页面就报错了，因为加上这个属性之后他的actions，mutations，getters都被限定在modules1这个模块中了，所以后续操作这种方法就要改变了（vue文件中）

export default {
    data() {
        return {
            // count:store.state.count
        };
    },
    computed: {
        // count() {
        //     return this.$store.state.count;
        // },
        count() {
            return this.$store.getters.getCount;
        },
        title() {
            return this.$store.getters.title;
        },
        //模块标题
        moduleTitle() {
            return this.$store.state.module1.title;
        },
        //年龄最大的学生
        maxAge() {
            return this.$store.getters['module1/maxAge'];
        },
        //被筛选过后的数据
        students() {
            return this.$store.getters['module1/getFilterStudents'];
        }
    },
    methods: {
        // 分发 Action
        add() {
            this.$store.dispatch("actionIncrease");
        },
        subtract() {
            this.$store.dispatch("actionSubtract");
        },
        // 获取未成年人
        getMinorStudents() {
            this.$store.dispatch("module1/getMinorStudents");
        },
        //获取成年人
        getAdultStudents() {
            this.$store.dispatch("module1/getAdultStudents");
        },
        //因为没有action事件，所以我们用commit方法分发事件
        setTitle(){
            this.$store.commit('module1/setTitle','修改后的标题')
        }
    }
};

这个命名空间属性能够让我们更好的处理某个模块的store数据，而不用思考各个模块之间会造成的影响

模块引用
在实际项目中我们可能会有这样一种情况，这个模块的数据和别的模块数据有关联关系，碰到这种情况应该怎么办呢

getters.js

import module1 from './modules/module1'
//引用即可
export default{
    title:state=>{
        return module1.state.title
    },
    getCount:state=>{
        return state.count
    }
}
辅助函数

mapState, mapGetters, mapActions,mapMutations这几个函数我就不具体解释了，vuex官方文档解释的比较清楚了，我这里就直接全部改写后结合文档大家慢慢看
storeDemo.vue

<template>
    <div id="vuex">
        {{title}}
        <button @click="subtract">-</button>
        {{count}}
        <button @click="add">+</button>

        <p>{{moduleTitle}}</p>
        <p>年龄最大的人:{{maxAge}}</p>
        <button @click="getAdultStudents">获取成年人</button>
        <button @click="getMinorStudents">获取未成年人</button>
        <button @click="setTitle('修改后的标题')">修改标题</button>
        <ul>
            <p v-if="students.length==0">暂无数据</p>
            <li v-for="(item,key) in students" :key="key">姓名:{{item.name}},年龄：{{item.age}}</li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "Vuex";
export default {
    data() {
        return {
            // count:store.state.count
        };
    },
    computed: {
        ...mapState({
            count: state => state.count
        }),
        ...mapGetters(["title"]),
        ...mapState("module1", {
            moduleTitle: state => state.title
        }),

        ...mapGetters("module1", ["maxAge"]),
        ...mapGetters("module1", {
            students: "getFilterStudents"
        })
    },
    methods: {
        ...mapActions({
            add: "actionIncrease",
            subtract: "actionSubtract"
        }),
        ...mapActions("module1", ["getAdultStudents", "getMinorStudents"]),
        ...mapMutations("module1", ["setTitle"])
    }
};
</script>

在做这个demo的时候因为已经想好了怎么为了后续写博客，所以基本把这个四个函数怎么使用方式都写出来了，更具体的估计就要去看文档了。毕竟我理解的不如原作者的深刻。

写时一时爽，重构火葬场，我现在是深刻理解了这句话，不过这次项目的重构也让自己的技术体会更深了一点。不慌，慢慢来，加油

天空影
关注
专栏目录
Vuex进阶使用之modules模块化划分、mapState、mapActions辅助函数的使用
达拉崩巴斑得贝迪卜多比鲁翁_
08-27 1772
注解：vuex是一个很简单、很方便的技术，入门很简单，这里给大家详细介绍下vuex的进阶使用。 一、vuex模块化modules 1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。 目录结构： store index.js --文件 modules --文件夹 2、store->index.js import Vue from 'vue' import Vuex from 'vuex'
vuex进阶用法
晴天有何特别
11-23 252
之前写的vuex只是小场景项目使用，当你的项目大了管理就不方便 modules里面的js其实是根据功能分类的 app.js 将通用数据通过vuex存储，包括后台请求，自定义的 import Vue from 'vue' const state = { commonEnums: { teachers: [], //老师 curriculums: [], /...
Vuex详解
最新发布
hang_sa_mu的博客
09-20 952
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说人话: 实现多个组件的数据共享,即一个数据需要在多个组件中使用,那么就需要把这个数据存储在VueX中。
Vuex——进阶
悦.L的博客
01-09 177
Vuex的基础篇主要介绍了Vuex的一些理论知识，和五个核心模块。那么我们继续去了解进阶内容，其实进阶内容比基础篇更加简单。 严格模式 什么是严格模式呢？Vuex规定了只能通过mutation函数改变状态，实际上getters和action都可以改变状态，只不过并不运行通过它们修改。所以严格模式就是在状态变更且不是由 mutation 函数引起的，将会抛出错误，这能保证所有的状态变更都能被调试工具跟踪到。 严格模式通过strict: true开启： const store = new Vuex.Stor.
vuex学习进阶
qq_40816649的博客
12-02 202
vuex在整个vue项目中去了非常重要的作用，它管理每个vue可以随时调用和改变的数据（例如用户名或用户头像） vuex实例里面有state，getters，mutations，action这四个对象。 创建vuex实例 新建store.js文件 引入相关的依赖并使用暴露出来 import Vue from 'vue' import Vuex from 'vuex' Vue.use(...
Vue总结（六）——Vuex进阶
qq_43776195的博客
03-09 269
文章目录Vue总结（六）——Vuex进阶前言1、getters1.2 基本使用1.3 示例2、mapState 与 mapGetters2.1 基本用法2.2 示例3、mapMutations 和 mapActions3.1 基本用法3.2 示例4、多组件共享数据5、模块化 + 命名空间（重要）5.1 基本使用5.2 示例5.2.1 代码抽离src/store/count.jssrc/store/person.jssrc/store/index.js5.2.2 页面编写Count.vuePerson.vue
vuex进阶知识点巩固
08-27
本文将深入探讨Vuex的进阶知识点，包括Getter、Actions以及Module模块化。 **一、Getter** Getter 是 Vuex 提供的一种方式，用于封装对状态(state)的复杂计算。在 Vue 的组件中，我们可能需要基于 state 进行一些...
Vuex 进阶之模块化组织详解
11-29
使用`vue init webpack-simple vuex-demo`创建项目，进入项目目录并安装依赖： ``` cd vuex-demo npm install npm install vuex -S npm run dev ``` 2. 创建模块化目录： 按照以下结构创建文件目录： ``` ...
vuex的进阶用法，由浅入深，详细解析
ctAnnice的博客
09-27 867
近几年基本都在写vue项目，vuex在每个项目中都会遇到，每次都是按照语法匆匆用，先实现需求，完成工作，用的也不是很规范，设计的也不是很合理，有一般的普通用法，也有高级用法，今天决定彻底搞懂各种用法后，仔细梳理出来。 作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。 1.先说一下vuex到底是什么？ vuex是一个专门为vue框架开发的管理状态模式，可以理解为在data中的属性，需要共享给其他组件使用的部分，使用vuex进行统一管理。 2.vuex中，有默认的
Vuex 进阶，创建一个笔记本项目
大灰狼的小绵羊哥哥的博客
02-12 1723
教程开始 http://www.jianshu.com/p/dc9a79f6ceb7 让我们通过这个例子，来理解 Vuex2.0 给我们带来的便利，之前在研究 Vuex2.0 的时候也是踩了一些坑，所以写了本文，也是为了减少后面出现更多的学习者避免踩坑。 我们会通过这个例子解释相应的概念，以及 Vuex 所要解决的问题：如何管理一个包含许多组件的大型应用。我们假定这个例子使用
Vuex 入门到进阶
jyliyue的博客
07-06 315
先说一下Vuex到底是什么？ Vuex 是一个专门为 vue.js 应用程序开发的状态管理模式 这个状态我们可以理解为在 data 中的属性，需要共享给其他组件使用的部分 也就是说，我们需要共享的数据，可以使用 vuex 进行统一集中式的管理 喜欢看代码学习的的可直接下载下方 Demo https://gitee.com/jiangliyue/VuexDemo.git Vuex中的五...
Vuex
weixin_50429510的博客
08-16 107
Vuex 理解Vuex vuex是什么 概念：专门在Vue中集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且使用于任意组件间通信 Github地址：http://github.com/vuejs/vuex 什么时候使用Vuex 多个组件依赖同一状态 来自不同组件的行为需要变更同一状态 两种多组件共享数据方式对比 全局事件总线实现 vuex实现 搭载vuex环境 安装vuex插件 npm i vuex
vuex知识进阶
HiYulinlin的博客
03-19 842
vuex知识进阶
vuex进阶（模块化）
Tank_in_the_street的博客
09-15 3314
下面这篇是承接上一篇的内容的，如果没看过上一篇的内容，建议先翻一下上一篇的内容vuex入门。咋们这篇的功能和上一篇的一样，App.vue的内容没改，改的只是将store.js整个文件拆分成各个模块，下面是我拆分成各个js文件一览：         在这里，actions、getters和mutaions文件我就不解释了，下面解释的是index.js和types.js文件还有state状态
vuex 深入实践
陈靖
06-20 930
Vuex 核心模块 state 单一状态树,用一个对象就包含了全部的应用层级状态 mapState 当一个组件需要多个状态的时候, 将这些状态都声明为计算属性,会有些重复和冗余 对象展开符号 …mapState({}) import {mapState} from 'vuex' export default { // mapState要写到com...
vue--vuex详解
weixin_30721077的博客
05-08 186
　　Vuex 　　　　什么是Vuex？ 　　　　　　官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件 　　　　为什么要用Vuex？ 　　　　　　我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只...
Vue学习的进阶~~！Vuex的理解和实践。
知野ggの博客
03-08 470
vuex就是一个公共的仓库，是用来在多个组件之间共享数据的。官方称之为状态管理模式。顾名思义，也就是说，是对组件进行集中式的状态管理 vuex目前是整个vue中非常重要的一个中间件 那么既然vuex是一个管理仓库，那它管理的对象是谁呢？ vuex管理的对象是：shared states （可以共享的状态），并且仓库中的状态一定是可以让仓库进行修改的。 vuex中的4个核心概念： 1.store ...
vuex的基础和进阶
happygirl0917的博客
08-03 163
这两天做项目用到了vuex，正好把他做个总结，便于以后在看。使用方法是mapState,mapGetters,mapActions,mapMutations。前面是基础使用方法，后面是模块化（项目中多会使用）。 1.安装npm install vuex --save 2.使用在main.js里面 import router from './router' new Vue({ el: '#app', router, store, components: { App }, temp.
Vuex模块化拆分实践：从基础到进阶
"详解Vuex下Store的模块化拆分实践" 在Vue.js的应用中，随着项目的复杂性增加，管理状态通常会变得越来越困难。Vuex作为官方的状态管理库，提供了一种有效的方式来组织和管理应用程序的状态。在Vuex 2.0及更高版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值