vue项目笔记（21）-vuex代码优化

偏执的太偏执、 2021-09-16 03:16 277阅读 0赞

# vuex代码优化 #

在使用vuex的项目代码中，html中往往会出现\{ \{this.$store.state.city\}\}这种代码，很不规范。vuex中给出了部分api可以对此进行优化。

## mapState ##

home/compoments/Header.vue中\{ \{this.$store.state.city\}\}修改为\{ \{this.city\}\}，引入mapState，并设置计算属性。

<router-link to="/city">
          <div class="header-right">
            {
       {this.city}}
            <span class="iconfont arrow-icon"></span>
          </div>
        </router-link>

import { mapState } from 'vuex' // 引入
    
    computed:{
          ...mapState(['city']) // 添加computed
        }

其中，...是展开符，将vuex中state中的city映射到该组件中，对应的计算属性也是city，mapState可以接受数组或对象。

## mapMutations ##

city/components/List.vue中，我们做如下修改：首先，引入mapMutations，而后在methods中使用mapMutations，映射changeCity方法，然后在点击事件中调用该方法，注意：传入参数city。

import { mapState, mapMutations } from 'vuex'

methods: {
          handleCityClick(city){
    //        this.$store.commit('changeCity', city); 此段代码有以下代码代替
            this.changeCity(city);
            this.$router.push('/');
          },
          ...mapMutations(['changeCity'])
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目中使用vuex

说明 > 此处仅做简单的记录，并没有详细的去整理。步骤 1、通过命令在项目根目录安装vuex npm install vuex --save-d

Dear 丶/ 2023年01月13日 05:57/ 0 赞/ 154 阅读

相关 vue项目优化(代码优化)

1.keep-alive 1. 使用keep-alive缓存不活动的组件 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件

爱被打了一巴掌/ 2022年12月27日 04:41/ 0 赞/ 159 阅读

相关 Vue学习（vuex）-学习笔记

文章目录 Vue学习（vuex）-学习笔记含义理解具体代码辅助函数

迷南。/ 2022年10月04日 13:56/ 0 赞/ 142 阅读

相关 vue 项目优化

1.gzip压缩 gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web

超、凢脫俗/ 2022年09月11日 07:23/ 0 赞/ 148 阅读

相关 vue项目中引入vuex

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

今天药忘吃喽~/ 2022年09月09日 15:49/ 0 赞/ 229 阅读

相关 vuex代码笔记

store.js文件： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex

╰半夏微凉°/ 2022年05月04日 01:56/ 0 赞/ 179 阅读

相关 vue项目笔记（22）-使用keep-alive优化网页代码

使用keep-alive优化网页代码在运行项后时，打开控制台的Network-XHR，点击城市切换，而后点击返回到首页，我们发现index.json请求了两次，在产

落日映苍穹つ/ 2021年09月16日 03:18/ 0 赞/ 278 阅读

相关 vue项目笔记（21）-vuex代码优化

vuex代码优化在使用vuex的项目代码中，html中往往会出现\{ \{this.$store.state.city\}\}这种代码，很不规范。vuex中给出了部

偏执的太偏执、/ 2021年09月16日 03:16/ 0 赞/ 278 阅读

相关 vue项目笔记（19）-使用Vuex实现数据数据共享

使用Vuex实现数据数据共享 City与Home组件没有公共父级组件，要实现共有数据分享，可以借助Vuex。 Vuex基础知识 Vuex是什么呢？

亦凉/ 2021年09月16日 03:08/ 0 赞/ 311 阅读

相关 vue项目笔记（18）-搜索组件逻辑处理及代码优化

搜索组件逻辑处理及代码优化在我遇到的项目中，对于对于搜索组件，部分是后台直接写好的接口，直接调用既可以完成搜索；另一种就是由前端完成搜索逻辑处理，如下： 1、

超、凢脫俗/ 2021年09月16日 03:06/ 0 赞/ 265 阅读