如何存储和保存数据

Question

我开始学习商店，我想上传图像，并将其保存在本地上。因此，如果我重新加载页面映像必须保存

存储photoupload.js

const state =  {
  photo: '1'
}
const getters = {
  getPhoto: (state) => {
    return state.photo
  }
}
const mutations = {
  setPhoto(state, photoName) {
    state.photo = photoName
  },
}
const actions = {
  getPhoto(context, photo) {
    context.commit('getPhoto', photo)
  }
}
export const testings = {
  namespaced: true,
  state,
  mutations,
  getters,
  actions,
};

模板

<div class="upload">
  <img :src="previewImage ? previewImage : 'assets/images/defaultAva.png'" class="profileImg" />
  <label class="edit">
    <input ref="imageInput" type="file" name="file" accept="image/png, image/jpeg, image/jpg" @change="uploadImage">
  </label>
</div>

<script>
 data: () => ({
   previewImage: null,
 }),
 computed: {
  getPhoto() {
   return this.$store.getters["photoUpload/getPhoto"];
  },
 },
 methods: {
  uploadImage(e){
   const image = e.target.files[0];
   const reader = new FileReader();
   reader.readAsDataURL(image);
   reader.onload = e =>{
     this.previewImage = e.target.result;
   };
  },
  ...mapActions("testings", ["getPhoto"]),
 },
</script>

，那么我必须以巫婆的方式去，我可以上传图像以预览图像，但是如何将其发送到存储，以在本地保存它？

Answer 1

因此，如果我重新加载页面图像必须保存

商店的目的是在本地将数据保存到所有应用程序中，而不是在页面刷新中。

来自文档

“商店”基本上是一个容纳您的应用程序状态

的容器

最常见的情况是将数据从您的API保存到全局变量中，可以在所有应用程序中使用getters和您一样。

如果要保留重新加载的数据，则可以使用其他软件包，例如 vuex-persist 。

---

在您的情况下，如果要将图像保存到商店，则可以使用mapAction中的操作。

这是我的做法：

methods: {
  uploadImage(e){
   const image = e.target.files[0];
   const reader = new FileReader();
   reader.readAsDataURL(image);
   reader.onload = e =>{
     this.previewImage = e.target.result;
     this.getPhotoToStore(e.target.result) // <-- here 
   };
  },
  ...mapActions({
      getPhotoToStore: "myStore/getPhoto"
  }),
 },

我使用这些动作：

const actions = {
  getPhoto({ commit }, photo) {
    commit('getPhoto', photo) // <-- commiting to the mutations
  }
}