添加列表数据，通过vuex标识最新数据

最新推荐文章于 2023-10-30 17:58:34 发布

置顶吃糖牙疼

最新推荐文章于 2023-10-30 17:58:34 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vuex 标识最新数据

本文链接：https://blog.youkuaiyun.com/weixin_43997143/article/details/90900192

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Vuex状态管理，实现对最新数据的标识与取消标识。通过定义store中的数据ID数组，添加新数据时更新数组并标记为最新，点击查看详情时移除标识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表添加新数据，通过标识区分最新数据，在点击查看详情后，取消标识

1、在store.js中定义一个用来存放数据ID的空数组：arrList，在mutation中，处理arrList

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
const state={
  arrList:[]
}

const mutations={
  newID(state, payload) {
    state.arrList=payload;
  },
}

const getters = {}

export default new Vuex.Store({
  state,
  mutations,
  getters
});

2、添加页面，添加新数据成功后，push该数据ID到arrList中，并缓存到vuex中

<script>
import { mapMutations } from 'vuex';
methods:{
...mapMutations({
      newID: "newID"
    }),
    this.$http({
                method: 'post',
                url: 'xxxxxxxxxxxxxxxx',
                data: dara,
            }).then(function (response) {
                var result = response.data;
                let arr=this.$store.state.arrList;
                this.newID([...arr,result.id]); //push操作
            }
}
</script>

3、在列表页渲染数据的时候，判断ID是否存在于arrList中，如果存在，就表示该数据是最新的

<template>
<ul>
    <li v-for='(el,index) in list' :key="index" @click='getDetail(el.id)' >
       <i v-if='arrList.indexOf(el.id)>-1' class='newFont'>new</i>
       <p>{{el.name}}</p>
    </li>
</ul>
</template>
<script>
data() {
    return {
    idList:[]
	}
}
 mounted() {
    this.idList=this.$store.state.arrList; //获取store中的arrList
  }
  
</script>

4、点击查看详情时，把当前ID从arrList中删除

<script>
methods:{
   getDetail(id){
      this.newID(_.pull(this.arrList,id));
      this.$router.push({ path: `detail/${id}` });
    },
}
</script>