- fix: updated from Store to Component: using Watch with 'immediate' parameters! @Watch('todos_changed', { immediate: true, deep: true })

This commit is contained in:
Paolo Arena
2019-02-03 14:40:20 +01:00
parent 990955b6c2
commit 602eb6bc20
6 changed files with 133 additions and 39 deletions

View File

@@ -41,7 +41,7 @@ export default class Todo extends Vue {
itemDragStart: any = null
itemDragEnd: any = null
selrowid: number = 0
todos_global: ITodo[] = []
todos_global: any
// @Prop({ required: false }) category: string
@@ -53,13 +53,34 @@ export default class Todo extends Vue {
console.log('drag = ' + this.drag)
}
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: any) {
// Some action
}
@Watch('$route.params.category') changecat() {
// console.log('changecat')
this.load()
}
@Watch('todos_global') refresh() {
console.log('Todos.state.todos CHANGED!')
get todos_changed() {
return Todos.state.todos_changed
}
@Watch('todos_changed', { immediate: true, deep: true })
changetodos_changed(value: string, oldValue: string) {
console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
this.updatetable(true)
}
get testPao() {
return Todos.state.testpao
}
@Watch('testPao', { immediate: true, deep: true })
changedTestpao(value: string, oldValue: string) {
console.log('testpao CHANGED', value, oldValue)
this.updatetable(true)
}
@@ -258,13 +279,11 @@ export default class Todo extends Vue {
// console.log('Array PRIOR:', this.arrPrior)
}
async load() {
this.todos_global = Todos.state.todos
this.todos_global = Todos.state.todos_changed
this.todos_arr = [...Todos.state.todos]
// Set last category selected
localStorage.setItem(rescodes.localStorage.categorySel, this.getCategory())
@@ -494,7 +513,6 @@ export default class Todo extends Vue {
// Delete item
await globalroutines(this, 'delete', 'todos', null, id)
.then((ris) => {
console.log('UpdateTable', ris)
mythis.updatetable()
}).catch((error) => {
console.log('err: ', error)

View File

@@ -35,6 +35,9 @@
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
<q-input v-model="testPao" float-label="testPao"/>
<q-input v-model="todos_changed" float-label="todos_changed"/>
<div class="flex-item btn-item">
<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>
</div>

View File

@@ -1,6 +1,6 @@
import store from '../store'
import _ from 'lodash'
import { UserStore } from '@modules'
import { UserStore, Todos } from '@store'
import { i18n } from '../plugins/i18n'
import {idbKeyval as storage} from '../js/storage.js';
@@ -26,39 +26,58 @@ function writeConfigIndexDb(context, data) {
}
async function readfromIndexDbToStateTodos(context) {
async function readfromIndexDbToStateTodos(context, table) {
console.log('*** read from IndexDb to state.todos')
return await storage.getalldata('todos')
.then(ristodos => {
console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', ristodos.length)
console.log('ristodos:', ristodos)
UserStore.state.todos = [...ristodos]
return await storage.getalldata(table)
.then(records => {
console.log('PRIMA:', Todos.state.todos)
console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
console.log(' records:', records)
if (table === 'todos') {
Todos.state.todos = [...records]
console.log('DOPO:', Todos.state.todos)
Todos.state.todos_changed++
console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
setTimeout(testfunc2, 3000)
}
}).catch((error) => {
console.log('err: ', error)
})
}
export default async (context, cmd, table, datakey, id) => {
function consolelogpao(str, str2 = '', str3 = '') {
console.log(str, str2, str3)
// Todos.mutations.setTestpao(str + str2 + str3)
}
function testfunc2 () {
consolelogpao('testfunc2')
Todos.mutations.setTodos_changed()
Todos.mutations.setTestpao(Todos.state.todos_changed)
consolelogpao('testfunc2: Todos.state.todos_changed:', Todos.state.todos_changed)
}
export default async (context, cmd, table, datakey = null, id = '') => {
if (cmd === 'loadapp') {
// ****** LOAD APP AL CARICAMENTO ! *******
return saveConfigIndexDb(context, datakey)
if ('indexedDB' in window) {
if (!UserStore.state.networkDataReceived) {
return await readfromIndexDbToStateTodos(context)
}
}
} else if (cmd === 'write') {
return await storage.setdata(table, datakey)
} else if (cmd === 'updateinMemory') {
return await readfromIndexDbToStateTodos(context, table)
} else if (cmd === 'readall') {
return await storage.getalldata(table)
} else if (cmd === 'read') {
return await storage.getdata(table, id)
} else if (cmd === 'delete') {
return await storage.deletedata(table, id)
} else if (cmd === 'log') {
consolelogpao(table)
}
}

View File

@@ -21,4 +21,6 @@ export interface ITodosState {
visuOnlyUncompleted: boolean
networkDataReceived: boolean
todos: ITodo[]
todos_changed: number
testpao: String
}

View File

@@ -1,15 +1,18 @@
import { ITodo, ITodosState } from 'model'
import { IGlobalState, ITodo, ITodosState } from 'model'
import { storeBuilder } from './Store/Store'
import Api from '@api'
import { rescodes } from './rescodes'
import { UserStore } from '@store'
import { Todos, UserStore } from '@store'
import globalroutines from './../../globalroutines/index'
const state: ITodosState = {
visuOnlyUncompleted: false,
networkDataReceived: false,
todos: []
todos: [],
todos_changed: 1,
testpao: 'Test'
}
const b = storeBuilder.module<ITodosState>('TodosModule', state)
@@ -29,8 +32,26 @@ namespace Getters {
namespace Mutations {
function setTestpao(state: ITodosState, testpao: String) {
state.testpao = testpao
}
function setTodos_changed(state: ITodosState) {
state.todos_changed++
}
export const mutations = {
setTestpao: b.commit(setTestpao),
setTodos_changed: b.commit(setTodos_changed),
}
}
function consolelogpao(strlog, strlog2 = '', strlog3 = '') {
globalroutines(null, 'log', strlog + strlog2 + strlog3, null)
}
namespace Actions {
function json2array(json) {
@@ -67,14 +88,42 @@ namespace Actions {
})
.catch((error) => {
if (process.env.DEV) {
console.log('ERROREEEEEEEEE')
console.log('dbLoadTodo ERRORE', error)
console.log(error)
}
// If error network connection, take the data from IndexedDb
return rescodes.ERR_GENERICO
})
if (!Todos.state.networkDataReceived) {
console.log('NETWORK UNREACHABLE ! (Error in fetch)')
consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)')
// Read all data from IndexedDB Store into Memory
await globalroutines(null, 'updateinMemory', 'todos', null)
.then(() => {
testfunc()
})
}
}
function aspettansec(numsec) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('anything')
}, numsec)
})
}
async function testfunc() {
while (true) {
consolelogpao('testfunc')
// Todos.mutations.setTodos_changed()
Todos.state.todos_changed++
console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
await aspettansec(5000)
}
}
async function dbSaveTodo(context, itemtodo: ITodo) {
@@ -129,7 +178,7 @@ namespace Actions {
})
.catch((error) => {
if (process.env.DEV) {
console.log('ERROREEEEEEEEE')
console.log('ERRORE FETCH', 'dbInsertSaveTodo', method)
console.log(error)
}
return rescodes.ERR_GENERICO
@@ -154,7 +203,7 @@ namespace Actions {
})
.catch((error) => {
if (process.env.DEV) {
console.log('ERROREEEEEEEEE', error)
console.log('ERRORE FETCH', 'dbDeleteTodo')
}
return rescodes.ERR_GENERICO
})
@@ -187,7 +236,7 @@ const TodosModule = {
return stateGetter()
},
getters: Getters.getters,
// mutations: Mutations.mutations,
mutations: Mutations.mutations,
actions: Actions.actions
}

View File

@@ -7,6 +7,7 @@ import router from '@router'
import { serv_constants } from '../Modules/serv_constants'
import { rescodes } from '../Modules/rescodes'
import { GlobalStore, UserStore, Todos } from '@store'
import globalroutines from './../../globalroutines/index'
const bcrypt = require('bcryptjs')
@@ -348,7 +349,7 @@ namespace Actions {
})
.catch((error) => {
if (process.env.DEV) {
console.log('ERROREEEEEEEEE')
console.log('signup ERROREEEEEEEEE')
console.log(error)
}
Mutations.mutations.setServerCode(rescodes.ERR_GENERICO)
@@ -450,8 +451,7 @@ namespace Actions {
})
.catch((error) => {
if (process.env.DEV) {
console.log('ERROREEEEEEEEE')
console.log(error)
console.log('signin ERRORE', error)
}
Mutations.mutations.setServerCode(rescodes.ERR_GENERICO)
return rescodes.ERR_GENERICO
@@ -497,8 +497,11 @@ namespace Actions {
GlobalStore.mutations.setCategorySel(localStorage.getItem(rescodes.localStorage.categorySel))
Todos.actions.dbLoadTodo()
}
async function autologin (context) {
try {
console.log('*** Autologin ***')