Fixed last TypeScript issues from store

This commit is contained in:
Ferdinand Thiessen 2020-10-29 01:39:06 +01:00
parent 7c33a71c4d
commit e3398c3fa5
11 changed files with 51 additions and 35 deletions

View File

@ -2,6 +2,7 @@ import axios, { AxiosInstance } from 'axios';
import { boot } from 'quasar/wrappers'; import { boot } from 'quasar/wrappers';
import config from '../config'; import config from '../config';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store';
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
@ -9,14 +10,14 @@ declare module 'vue/types/vue' {
} }
} }
export default boot<Store<any>>(({ Vue, store }) => { export default boot<Store<StateInterface>>(({ Vue, store }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
axios.defaults.baseURL = config.baseURL; axios.defaults.baseURL = config.baseURL;
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
const session: FG.Session = store.getters['user/session']; const session = store.state.user.session;
if (session) { if (session.token) {
config.headers = {'Authorization': 'Token ' + session.token}; config.headers = {'Authorization': 'Token ' + session.token};
} }
return config; return config;

View File

@ -1,15 +1,15 @@
import { boot } from 'quasar/wrappers'; import { boot } from 'quasar/wrappers';
import { StateInterface } from 'src/store';
import { RouteRecord } from 'vue-router'; import { RouteRecord } from 'vue-router';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default boot<Store<StateInterface>>(({ router, store }) => { export default boot<Store<StateInterface>>(({ router, store }) => {
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
store store
.dispatch('user/loadFromLocalStorage') .dispatch('user/loadFromLocalStorage')
.then(() => { .then(() => {
const user: FG.User = <FG.User>store.getters['user/user']; const user = store.state.user.user;
const session: FG.Session = <FG.Session>store.getters['user/session']; const session = store.state.user.session;
if (session.expires >= new Date()) { if (session.expires >= new Date()) {
store.dispatch('user/doLogout').catch(error => {console.warn(error)}); store.dispatch('user/doLogout').catch(error => {console.warn(error)});

View File

@ -215,6 +215,4 @@ export default boot<Store<StateInterface>>(({ Vue, router, store }) => {
// save plugins in VM-variable // save plugins in VM-variable
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeistPlugins = loadedPlugins; Vue.prototype.$flaschengeistPlugins = loadedPlugins;
console.log(loadedPlugins);
console.log(Vue.prototype.$flaschengeistPlugins);
}); });

View File

@ -48,8 +48,7 @@ export default defineComponent({
const substring = props.title const substring = props.title
.substring(startIndex, endIndex) .substring(startIndex, endIndex)
.replace(/"/g, ''); .replace(/"/g, '');
console.log(substring); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
console.log('loadFromStore');
return <string>root.$store.getters[substring]; return <string>root.$store.getters[substring];
} }
return props.title; return props.title;

View File

@ -101,6 +101,8 @@ import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import { Screen } from 'quasar'; import { Screen } from 'quasar';
import { LoadedPlugins, PluginMainLink } from 'boot/plugins'; import { LoadedPlugins, PluginMainLink } from 'boot/plugins';
import { defineComponent, ref, computed } from '@vue/composition-api'; import { defineComponent, ref, computed } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
const links = [ const links = [
{ {
@ -170,8 +172,9 @@ export default defineComponent({
}); });
function logout() { function logout() {
ctx.root.$store const store = <Store<StateInterface>>ctx.root.$store;
.dispatch('user/logout', ctx.root.$store.getters['user/session'].token) store
.dispatch('user/logout', store.state.user.session.token)
.catch(error => { .catch(error => {
console.warn(error); console.warn(error);
}); });

View File

@ -90,11 +90,16 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api'; import { computed, defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Main',
setup(_, { root: { $store } }) { setup(_, { root }) {
const store = <Store<StateInterface>>root.$store;
const user = computed<FG.User>(() => { const user = computed<FG.User>(() => {
return <FG.User>$store.getters['user/user']; return store.state.user.user;
}); });
const firstname = ref(user.value.firstname); const firstname = ref(user.value.firstname);
@ -128,7 +133,7 @@ export default defineComponent({
new_password: new_password.value new_password: new_password.value
}); });
} }
$store.dispatch('user/updateUser', change_values).catch(error => { store.dispatch('user/updateUser', change_values).catch(error => {
console.warn(error); console.warn(error);
}); });
} }

View File

@ -38,6 +38,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({ export default defineComponent({
name: 'Sessions', name: 'Sessions',
props: { props: {
@ -46,6 +49,8 @@ export default defineComponent({
} }
}, },
setup(_, { root }) { setup(_, { root }) {
const store = <Store<StateInterface>>root.$store;
function getBrowserIcon(browser: string) { function getBrowserIcon(browser: string) {
return browser == 'firefox' return browser == 'firefox'
? 'mdi-firefox' ? 'mdi-firefox'
@ -55,6 +60,7 @@ export default defineComponent({
? 'mdi-apple-safari' ? 'mdi-apple-safari'
: 'mdi-help'; : 'mdi-help';
} }
function getPlatformIcon(platform: string) { function getPlatformIcon(platform: string) {
return platform == 'linux' return platform == 'linux'
? 'mdi-linux' ? 'mdi-linux'
@ -66,12 +72,12 @@ export default defineComponent({
} }
function deleteSession(token: string) { function deleteSession(token: string) {
root.$store.dispatch('sessions/deleteSession', token).catch(error => { store.dispatch('sessions/deleteSession', token).catch(error => {
console.warn(error); console.warn(error);
}); });
} }
function isThisSession(token: string) { function isThisSession(token: string) {
return root.$store.getters['user/session'].token == token; return store.state.user.session.token == token;
} }
return { return {

View File

@ -33,27 +33,27 @@ import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import CircularProgress from 'components/loading/CircularProgress.vue'; import CircularProgress from 'components/loading/CircularProgress.vue';
import Sessions from '../components/settings/Sessions.vue'; import Sessions from '../components/settings/Sessions.vue';
import Main from '../components/settings/Main.vue'; import Main from '../components/settings/Main.vue';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
components: { CircularProgress, Sessions, Main }, components: { CircularProgress, Sessions, Main },
setup(_, { root }) { setup(_, { root }) {
const store = <Store<StateInterface>>root.$store;
onBeforeMount(() => { onBeforeMount(() => {
root.$store.dispatch('sessions/getSessions').catch(error => { store.dispatch('sessions/getSessions').catch(error => {
console.warn(error); console.warn(error);
}); });
}); });
const sessions = computed( const sessions = computed(() => store.state.sessions.sessions);
() => <FG.Session[]>root.$store.getters['sessions/sessions']
);
function showRootGetters() { function showRootGetters() {
//ctx.root.$store.dispatch('sessions/getSessions');
console.log(sessions.value); console.log(sessions.value);
} }
const sessionsLoading = computed( const sessionsLoading = computed(() => store.state.sessions.loading);
() => <boolean>root.$store.getters['sessions/loading']
);
return { return {
showRootGetters, showRootGetters,

View File

@ -24,18 +24,19 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, computed } from '@vue/composition-api'; import { defineComponent, computed } from '@vue/composition-api';
import { UserStateInterface } from '../store/user';
import { mainLink } from '../plugin'; import { mainLink } from '../plugin';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
setup(_, { root }) { setup(_, { root }) {
const userObj = computed( const store = <Store<StateInterface>>root.$store;
() => <UserStateInterface>root.$store.getters['user/user']
); const userObj = computed(() => store.state.user.user);
const sessionObj = computed(
() => <UserStateInterface>root.$store.getters['user/session'] const sessionObj = computed(() => store.state.user.session);
);
const checkMain = computed(() => { const checkMain = computed(() => {
return mainLink.name == root.$route.name; return mainLink.name == root.$route.name;
}); });

View File

@ -102,10 +102,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
dispatch('doLogout', token).finally(() => {void Router.push({ name: 'login' });}); dispatch('doLogout', token).finally(() => {void Router.push({ name: 'login' });});
}, },
updateUser({ commit, getters }, data) { updateUser({ commit, state }, data) {
commit('setLoginLoading', true); commit('setLoginLoading', true);
axios axios
.put(`/users/${getters.user.userid}`, data) .put(`/users/${state.user.userid}`, data)
.catch(error => { .catch(error => {
console.log(error); console.log(error);
}) })

View File

@ -1,4 +1,6 @@
import { store } from 'quasar/wrappers'; import { store } from 'quasar/wrappers';
import { SessionInterface } from 'src/plugins/user/store/session';
import { UserStateInterface } from 'src/plugins/user/store/user';
import Vuex from 'vuex'; import Vuex from 'vuex';
/* /*
@ -6,7 +8,8 @@ import Vuex from 'vuex';
* directly export the Store instantiation * directly export the Store instantiation
*/ */
export interface StateInterface { export interface StateInterface {
user: UserStateInterface,
sessions: SessionInterface
} }