vuexロゴによって最新のデータ、データのリストを追加します。

あなたは詳細の表示をクリックした後、最新のデータを識別することによって区別し、新たなデータリストを、追加、キャンセルロゴ

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>