day10vuex模块化、映射函数、SASS

最新推荐文章于 2024-03-04 08:47:22 发布

2301_78238711

最新推荐文章于 2024-03-04 08:47:22 发布

阅读量133

点赞数

分类专栏：第三阶段文章标签： sass 前端 css vue

本文链接：https://blog.csdn.net/2301_78238711/article/details/131053064

版权

第三阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了Vuex中通过模块化管理复杂状态的方法，包括创建独立的js文件、启用namespaced、导入和管理模块。同时，提到了映射函数如mapState、mapGetters、mapMutations和mapActions在组件中的使用，以简化对Vuex状态和方法的访问。此外，文章还讨论了Sass作为CSS预处理器的优势，如变量、嵌套选择器、条件语句和函数，以增强CSS的可维护性和灵活性。

摘要由CSDN通过智能技术生成

一、模块化

原因：

使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

步骤：

1.一个模块一个js文件,负责管理一个数据每个模块拥有自己的 state、mutations、actions、getters，不需要module、plgins

2.模块对象的首行添加：namespaced:true，代表开启模块化，并将该对象导出

3.vuex对象文件中导入需要的模块

4.vuex对象中的moudles方法中管理导入的模块

------------------------------1.是一个js文件( 模块 ) , 负责管理historylist这个数据
export default {
    namespaced:true,----------2.开启模块化
    state:{ //存储数据
        historylist:[],
    },
    getters:{ //定义计算方法( 类似于组件中的计算属性 )
        
    },
    mutations:{ //定义同步方法

        //新增历史记录
        addHistory( state, payload ){
            state.historylist.push(payload);
        }

    },
    actions:{ //定义异步方法

    }
}
//----------------------------------------------------------
import { createStore,createLogger } from 'vuex'
-------------------------------------3.导入拆分出去的模块
import historylist from './modules/historylist'
//实例化vuex
export default createStore({
    state:{ //存储数据

    },
    getters:{ //定义计算方法( 类似于组件中的计算属性 )

    },
    mutations:{ //定义同步方法
        
    },
    actions:{ //定义异步方法

    },
    modules:{ //以模块化的方式管理state中的数据
        hl:historylist,-----------4.管理导入的模块
    },
    plugins:[ //集成第三方插件 来管理state中的数据
        createLogger()
    ] 
})

使用：

获取模块中的数据：$store.state.模块名.数据名
获取模块中的计算方法：$store.getters["模块名"/计算方法名]
触发模块中的同步方法：$store.commit("模块名/同步方法名"，参数)
触发模块中的异步方法：$store.dispatch("模块名/异步方法名"，参数)

<template>--------------------获取模块中的计算方法
  <div class="summary">
    <span>全部( {{ $store.getters['tl/totalCount'] }} )</span>
    <span>已完成( {{ $store.getters['tl/finishedCount'] }} )</span>
    <span>未完成( {{ $store.getters['tl/unfinishedCount'] }} )</span>
  </div>
</template>
//=========================================
<template>
  <div class="tasklist">
    <div class="task" v-for="(item,index) in $store.state.tl.tasklist" :key="index">----获取模块中的数据
        <div class="left">
            <input type="checkbox" :checked="item.status" @click="handleClick(item.id)">
            <span>{{item.name}}</span>
        </div>
        <span @click="handleDelete(item.id)">删除</span>
    </div>
   
  </div>
</template>
<script>
export default {
    methods:{
        handleClick(id){
            //触发同步方法(调用同步方法) changeTaskStatus
            this.$store.commit('tl/changeTaskStatus',id);-----触发模块中的同步方法
        },
        handleDelete(id){
            //触发同步方法(调用同步方法) deleteTask
            this.$store.commit('tl/deleteTask',id);------------触发模块中的同步方法
        }
    }
}
</script>

二、映射函数

作用：

可以将Vuex中的状态映射到组件的计算属性或方法中，以便于组件使用。在组件中使用映射函数，可以直接使用计算属性或方法来访问Vuex中的状态，而不需要在组件中写$store

步骤

在组件中，从vuex导入映射函数mapStat、mapGetters、mapMutations、mapActions
在对应的选项中映射数据，mapStat和mapGetters映射到computed，mapMutations和mapActions映射到methods中，
直接使用模块中的数据或者方法，不需要再加this.$store，

使用

获取模块中的数据：
1. 映射数据：computed:{...mapState('模块名',['数据名'])}
2. 使用数据：this.数据名
获取模块中的计算方法：

使用数据：this.计算方法名
1. 映射数据：computed:{...mapGetters('模块名',['计算方法名'])}
触发模块中的同步方法：

使用数据：this.同步方法名
1. 映射数据：computed:{...mapMutations('模块名',['同步方法名'])}
触发模块中的异步方法：

使用数据：this.异步方法名
1. 映射数据：computed:{...mapActions('模块名',['异步方法名'])}

<template>
  <div class="historyrecord">
    <div class="title">历史记录</div>
    <div class="list">-------------historylist直接使用
        <span v-for="(item,index) in historylist" :key="index">{{item}}</span>
    </div>
  </div>
<script>
import { mapState } from 'vuex'------mapState()从vuex中获取(映射)state到组件的computed中
export default {
  computed:{
    ...mapState('hl',['historylist'])--------映射模块的state数据
  }
}
</script>

//================================================================================

<script>
import { mapMutations } from 'vuex'------mapMutations() 从vuex中获取(映射)同步方法到组件的methods中
export default {
    data(){
        return {
            taskname:''
        }
    },
    methods:{
        ...mapMutations( 'tl', ['addTask']),--------映射模块的同步方法addTask
        ...mapMutations( 'hl', ['addHistory'])--------映射模块的同步方法addHistory
        handleAdd(){
            //触发同步方法( 调用同步方法 ) addTask
            this.addTask(this.taskname);----------直接使用
            //触发同步方法( 调用同步方法 ) addHistory
            this.addHistory(this.taskname);----------直接使用
            //清空输入框的值
            this.taskname = '';
        },
    }
}
</script>