Check below how to define the store, to access it, you ca do this:
const store = useCompanyEventsStore();
store.sorted;
store.events;
You will notice that the store calls a method every X seconds to get the new data from the server, to keep it up to date(using reload method).
I was using composition API and I had an object/store that I wanted to reset on client logout. I found that I can do it like this:
const company = reactive(new Company());
// Used when we re-login or on logout.
export class CompanyUtil {
public static clear() {
//https://stackoverflow.com/a/61509432
// https://github.com/vuejs/core/issues/1081
Object.assign(company, new Company());
}
}
export default company;
If you have a PWA, you might want to make sure that the client is using the latest version of it. Here are the steps needed to do this using quasar framework:
1. Make sure that the service-worker.js is not cached by nginx
Add this configuration in your nginx:
location ~ service-worker.js$ {
#add_header X-debug-whats-going-on 3;
add_header Cache-Control "no-cache, no-store";
expires -1;
try_files $uri $uri/ =404;
#/service-worker.js; -> https://serverfault.com/a/505099
}
Installl nvm
# Check latest release: https://github.com/nvm-sh/nvm/releases/latest
# This commands also adds the paths to your ~/.bashrc
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
Install latested node version and use it
nvm install --lts
nvm use --lts
# Or
nvm use 16.15.0
Install yarn and upgrade npm:
npm install --global yarn
npm install -g npm@8.10.0
Install RESTer extension.
LE: 14th Sept 2022 - Use Vue3 and you no longer need actions and mutations. Use State Management with Reactivity API
1. When you want to commit to a state(using actions and mutations), do not pass multiple parameters to the commit method, they will have the value undefined. Create an object and pass it like that. This:
commit(types.UPDATE_JOB, index, title);
Will become this:
commit(types.UPDATE_JOB, {index: index, title: job.title});
2. Props that have default value:
export default {
props: {
prop_without_defaut_value: {},
prop_with_defaut_value: {
default: false // this is a bool value
},
prop_with_defaut_value_string: {
default: String
}
},
data() {
return {
var_name: false
}
}
}
3. Use mapActions and custom methods:
methods: Object.assign({},
/* If we want to use mapActions and other
custom methods this is the way to do it
otherwise it will give an error */
mapActions([
'action_1',
'action_2'
]), {
method_1() {
this.title = this.job.title;
this.edit_mode = !this.edit_mode;
},
method_2() {}
}
),