如何存储和保存数据

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>

所以在我必须走的路，我可以将图像上传到 previewImage，但我如何将它发送到存储，以将其保存在本地？

Answer 1

So if i reloaded page image must be saved

存储的目的是将组件之间的数据本地保存到所有应用程序，而不是在页面刷新时。

来自documentation

A "store" is basically a container that holds your application state

最常见的情况是将数据从您的 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
  }
}

如何存储和保存数据

How to store and save data

store

vue.js