Vuex數據管理，組件數據一一對應

需求：我們點擊拍照後將拍好的照片放入vuex的state裏面管理，給其他的組件調用（此處以組件A，和組件B命名）

1.組件A：我們拿到圖片數據源，並且在點擊拍照的同時創建一個當前時間，將圖片源和時間以對象的形式提交vuex。

var url = canvas.toDataURL();
var date=new Date().toLocaleTimeString()
this.$store.commit("canvass", {url,date});

2. vuex（首先要記得下載和安裝vuex，此處省略）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 var state={   //要設置的全局訪問的state對象
     canvass:[]//圖片和時間保存在這
   };
    var getters = {   //實時監聽state值的變化(最新狀態)
    getCanvass(state) {  //承載變化的getCanvass的值 ，給組件B調用
       return state.canvass
    }
};
var mutations = {
    canvass(state,datalist){  //組件A提交過來的數據，給到canvass中保存
        state.canvass.unshift(datalist)
    }
};
 var actions = {

};
  var store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

3.組件B

html

<!-- 時間 -->
<ul class="row1">
  <li
    v-for="i in imglist"
    :key="i.url"
    @click="doImg(i.url)" //將循環到的圖片數據存入組件的數組中，方便時間和圖片一一對應
    class="infinite-list-item"
  >
    <el-button size="small">{{ i.date }}</el-button>
  </li>
</ul>
<!-- 當imglist數組中有數據的時候渲染imglist中的數據，當用戶點擊按鈕的時候顯示url數組中的數據 -->
<!-- 圖片 v-if判斷當imglist.length>0也就是最少有一條數據的時候才渲染該dom -->
<img :src="flag?imglist[0].url: url" class="image" v-if="imglist.length>0" />

vue

data() {
    return {
      imglist: [], //默認的圖片時間數據
      url: [], //點擊按鈕後對應的圖片時間數據
      flag:true
    };
  },
  created() {
    this.imglist = this.$store.getters.getCanvass; //拿到vuex中getters中的canvass數據
  }
 methods: {
    doImg(url) {
      this.url = url.split("???"); //點擊按鈕後將圖片時間數據保存到當前最近的url數組中
      this.flag=false
    }
 }

大致效果

這樣當我們沒有進行拍照進入該頁面的時候是空白顯示，當然我們進行拍照了之後進入該頁面，默認顯示最新拍的哪一張，在組件A拍照了幾張照片組件B就會顯示幾個時間點，點擊不同的時間點右側出現不同的時間點拍的照片