需求:我们点击拍照后将拍好的照片放入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就会显示几个时间点,点击不同的时间点右侧出现不同的时间点拍的照片