localStorage for vuex, persists data on refresh/browser close
This commit is contained in:
parent
2eb1fb055b
commit
5df017495e
|
|
@ -15,7 +15,8 @@
|
|||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0",
|
||||
"vue-tailwind": "^2.0.0",
|
||||
"vuex": "^3.4.0"
|
||||
"vuex": "^3.4.0",
|
||||
"vuex-persist": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
createNewASCII() {
|
||||
const payload = {
|
||||
title: this.forms.createAscii.title,
|
||||
key: this.asciibirdMeta.length + 1,
|
||||
key: this.asciibirdMeta.length,
|
||||
width: this.forms.createAscii.width,
|
||||
height: this.forms.createAscii.height,
|
||||
blockWidth: 8,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import VuexPersistence from 'vuex-persist'
|
||||
|
||||
Vue.use(Vuex);
|
||||
const vuexLocal = new VuexPersistence({
|
||||
storage: window.localStorage
|
||||
})
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
// Current tab user is viewing
|
||||
tab: 1,
|
||||
tab: 0,
|
||||
// Object that is a single ASCII block, used to clone and store data for each individual block
|
||||
defaultBlock: {
|
||||
x: 0,
|
||||
|
|
@ -20,7 +24,7 @@ export default new Vuex.Store({
|
|||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [{
|
||||
title: 'New ASCII',
|
||||
key: 1,
|
||||
key: 0,
|
||||
width: 5,
|
||||
height: 5,
|
||||
blockWidth: 8,
|
||||
|
|
@ -38,4 +42,5 @@ export default new Vuex.Store({
|
|||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
plugins: [vuexLocal.plugin]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -94,14 +94,17 @@ export default {
|
|||
this.$route.params.ascii.split('/').join('')
|
||||
];
|
||||
|
||||
console.log({ generateCanvasId: this.generateCanvasId, all_refs: this.$refs, current_canvas_ref: this.$refs[`canvas${this.currentAsciibirdMeta.key-1}`] })
|
||||
// I dono some routs bs or some bs needs -1 to make it all work
|
||||
let currentRefCanvas =`canvas${this.currentAsciibirdMeta.key-1}`;
|
||||
|
||||
if (this.$refs[`canvas${this.currentAsciibirdMeta.key-1}`]) {
|
||||
console.log('got', this.$refs[`canvas${this.currentAsciibirdMeta.key-1}`]);
|
||||
this.ctx = this.$refs[`canvas${this.currentAsciibirdMeta.key-1}`].getContext("2d")
|
||||
console.log({ generateCanvasId: this.generateCanvasId, all_refs: this.$refs, current_canvas_ref: this.$refs[currentRefCanvas] })
|
||||
|
||||
if (this.$refs[currentRefCanvas]) {
|
||||
console.log('got', this.$refs[currentRefCanvas]);
|
||||
this.ctx = this.$refs[currentRefCanvas].getContext("2d")
|
||||
console.log('current ctx', this.ctx)
|
||||
} else {
|
||||
console.log("Warning: could not find asciibird meta key " + `canvas${this.currentAsciibirdMeta.key-1}`)
|
||||
console.log("Warning: could not find asciibird meta key " + currentRefCanvas)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -112,18 +115,6 @@ export default {
|
|||
this.startPosition.x = e.clientX;
|
||||
this.startPosition.y = e.clientY;
|
||||
},
|
||||
// dataFieldClass() {
|
||||
// console.log({'NIGGA': this.$refs[this.generateCanvasId]});
|
||||
|
||||
// if (!this.$refs[this.generateCanvasId]) {
|
||||
// // First render, the element is not there yet
|
||||
// return null;
|
||||
// } else {
|
||||
// // Here is the element
|
||||
// this.ctx = this.$refs[this.generateCanvasId]
|
||||
// console.log(this.$refs[this.generateCanvasId]);
|
||||
// }
|
||||
// },
|
||||
processMouseMove(e) {
|
||||
console.log("Mouse move")
|
||||
if (this.selectionMode) {
|
||||
|
|
|
|||
18
yarn.lock
18
yarn.lock
|
|
@ -3165,6 +3165,11 @@ deepmerge@^1.5.2:
|
|||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
|
||||
integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
|
||||
|
||||
deepmerge@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
|
||||
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
|
||||
|
||||
default-gateway@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
|
||||
|
|
@ -4225,6 +4230,11 @@ flatted@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
|
||||
integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
|
||||
|
||||
flatted@^3.0.5:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
|
||||
integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==
|
||||
|
||||
flush-write-stream@^1.0.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
|
||||
|
|
@ -9103,6 +9113,14 @@ vue@^2.6, vue@^2.6.11:
|
|||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
|
||||
integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
|
||||
|
||||
vuex-persist@^3.1.3:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/vuex-persist/-/vuex-persist-3.1.3.tgz#518c722a2ca3026bcee5732f99d24f75cee0f3b6"
|
||||
integrity sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==
|
||||
dependencies:
|
||||
deepmerge "^4.2.2"
|
||||
flatted "^3.0.5"
|
||||
|
||||
vuex@^3.4.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"
|
||||
|
|
|
|||
Loading…
Reference in New Issue