Vuex数据管理，组件数据一一对应

谁践踏了优雅 2023-06-12 08:44 62阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

### 需求：我们点击拍照后将拍好的照片放入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>
    
    
    <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
        }
     }

## 大致效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1][]

这样当我们没有进行拍照进入该页面的时候是空白显示，当然我们进行拍照了之后进入该页面，默认显示最新拍的哪一张，在组件A拍照了几张照片组件B就会显示几个时间点，点击不同的时间点右侧出现不同的时间点拍的照片

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111113948484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191111115517734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5,size_16,color_FFFFFF,t_70