列表添加新数据,通过标识区分最新数据,在点击查看详情后,取消标识
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>