feat: save/load API key from/to local storage

src/main.js

@@ -9,5 +9,8 @@ Vue.config.productionTip = false
 new Vue({
 	router,
 	store,
-	render: h => h(App)
+	render: h => h(App),
+	beforeCreate() {
+		this.$store.commit('init')
+	}
 }).$mount('#app')

src/store/index.js

@@ -3,13 +3,32 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
 	state: {
+		apiKey: null
 	},
 	mutations: {
+		init(state) {
+			if(localStorage.getItem('store')) {
+				const json = localStorage.getItem('store')
+				const obj = JSON.parse(json)
+				const newState = Object.assign(state, obj)
+				this.replaceState(newState)
+			}
+		},
+		setApiKey(state, apiKey) {
+			state.apiKey = apiKey
+		}
 	},
 	actions: {
 	},
 	modules: {
 	}
 })
+
+store.subscribe((mutation, state) => {
+	console.log('STATE MODIFIED', JSON.stringify(state))
+	localStorage.setItem('store', JSON.stringify(state))
+})
+
+export default store

src/views/Home.vue

@@ -1,13 +1,29 @@
 <template>
+	<div>
+		<input
+			type="text"
+			v-model="apiKeyInput"
+		>
+		<button @click="setApiKey(apiKeyInput)">Set API key</button>
+	</div>
 </template>
 
 <script>
 //import HelloWorld from '@/components/HelloWorld.vue'
+import { mapMutations } from "vuex";
 
 export default {
 	name: "Home",
 	components: {
 		//HelloWorld
 	},
+	data() {
+		return {
+			apiKeyInput: this.$store.state.apiKey,
+		};
+	},
+	methods: {
+		...mapMutations(["setApiKey"]),
+	},
 };
 </script>