vue-electron / vuex-electron

Integration of Vuex and Electron
MIT License
305 stars 97 forks source link

state return previous data after page refresh #35

Open larbijirari opened 5 years ago

larbijirari commented 5 years ago
//store.js
import Vue from 'vue';
import Vuex from 'vuex';
import { createSharedMutations } from 'vuex-electron';
import AddresseStore from './Address.store';
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {

    address: AddresseStore,
  },
  actions: {
    init() {},
  },
  plugins: [createSharedMutations()],
//   strict: process.env.NODE_ENV !== 'production',
});
//Address.store.js
export default{
state: {
    countryList:[],
},
getters:{
countryList(state){
return state.countryList
}
},
mutations:{
SET_COUNTRY_LIST(state,payload){

console.log(state.countryList);   
//------------PROBLEM---------------------
//=>first load: [] 
//=>after refresh page ['ITALY','SPAIN']  (don't want this behavior i want my state initial value which is []  because i'm reloading page)
//------------------------------------------------
state.countryList =payload;
}
},
actions:{
loadCountryList(context){
axios.get('localhost:3000/country-list').then((result)=>{
context.dispatch('SET_COUNTRY_LIST',result);
})
}
}
}
//address.component.vue
<template>
<section>
<div v-for="(country, index) in countryList" v-bind:key="index">
{{country}}
</div>
</section>
</template>
<script>
export default {
  name: 'AddressComponenet',
computed:{
countryList(){
return this.$store.getters['address/countryList'];
}
},
mounted(){
this.$store.dispatch('address/loadCountryList');
}
}
</script>

after page refresh store giveback previous data stored. how can i prevent store from keeping data?

NoelDavies commented 5 years ago

Don't persist it, comment out plugins: [createSharedMutations()],

larbijirari commented 5 years ago

@NoelDavies thanks for your reply. we relay on plugins: [createSharedMutations()] to allow axios authenticate using certificate from the main process, once we comment plugins: [createSharedMutations()] our request for example axios.get(...) won't work because it's executed from the renderer process because it doesn't support certificate authentication.

akodkod commented 5 years ago

https://github.com/vue-electron/vuex-electron/issues/44

NoelDavies commented 4 years ago

@larbijirari Your main process should essentially be a router / event handler, it shouldn't be doing anything chunky. I'd suggest finding another way to get your authentication to work and possibly creating a hidden/fake window to handle these tasks and offload them from your primary renderer's processing power for painting etc.

crwgregory commented 3 years ago

You can delete the file that is saved manually. Underneath the hood this module is using electron-store that writes a json file to app.getPath('userData'); https://github.com/vue-electron/vuex-electron/blob/master/src/persisted-state.js https://www.npmjs.com/package/electron-store/v/2.0.0

So in your main process check to see where that is on your file system:

console.log('userData', app.getPath('userData'));

Then cd into the directory and remove the vuex.json file.


It would be cool if the plugin exposed a method that let us clear the saved state (basic CRUD). But I susspect you can instantiate your own Store and load it with the same name then call the .clear() method on it to clear the state manually.