Спасибо, что прочитали мой вопрос. Вот моя ситуация:
Nativescript Cli версия: 6.0.1
Vue: 4.1.2
Npm версия: 6.13.4
бэкэнд: Laravel 6.13.1 с паспортом
Я следую этому уроку https://dev.to/_phzn/persisting-data-between-app-launches-with-nativescript-vue-2j52
Мой код для входа в систему. vue Экран компонента в соответствии с руководством:
<template lang="html">
<Page @loaded="checkToken">
<ActionBar title="Login" />
<StackLayout>
<TextField v-model="email" hint="Email Address" />
<TextField v-model="password" hint="Password" secure="true" />
<Button text="Login" @tap="login" />
</StackLayout>
</Page>
</template>
<script>
import axios from 'axios';
import App from "./App";
export default {
data() {
return{
email: '',
password:''
}
},
methods: {
checkToken() {
this.$store.state.commit('loadFromStorage');
if(state.token) {
this.$navigateTo(App, {
clearHistory: true
})
}
},
async login() {
axios.post('LOGIN_API_URL_HERE', {
email: this.email,
password: this.password
}).then(token => {
this.$store.dispatch('setUser', token).then(() => {
this.$navigateTo(App, {
clearHistory: true
})
})
})
}
}
}
</script>
Это мой скрипт currentUser. js, я решил вместо него использовать currentUser магазина. js
import * as ApplicationSettings from 'tns-core-modules/application-settings';
import Vue from "nativescript-vue";
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
token: false
};
const mutations = {
loadFromStorage(state) {
const storedState = ApplicationSettings.getString("token");
if(storedState) {
const token = JSON.parse(storedState);
state.token = token;
}
},
setUser(state, token) {
state.token = token;
ApplicationSettings.setString("token", JSON.stringify(token));
},
clearUser(state) {
state.token = false;
ApplicationSettings.remove("token");
}
};
const actions = {
setUser({ commit }, token) {
commit('setUser', token);
},
clearUser({ commit }) {
commit('clearUser');
}
};
const getters = {};
const currentUser = new Vuex.Store({state, mutations, actions, getters});
export default currentUser;
и мой главный. js выглядит так
import Vue from 'nativescript-vue'
import Login from './components/Login'
import store from "./store/store";
import currentUser from "./store/currentUser";
import VueDevtools from 'nativescript-vue-devtools'
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
new Vue({
store: currentUser,
render: h => h('frame', [h(Login)])
}).$start()
Моя проблема:
когда я запускаю команду tns debug android, я получаю сообщение об ошибке TypeError: this. $ store.state.commit не является функцией. this. $ Store.state.commit часть используется в checkToken () при входе в систему. vue
Successfully synced application org.nativescript.application on device emulator-5554.
JS: [Vue warn]: Error in v-on handler: "ReferenceError: state is not defined"
JS:
JS: found in
JS:
JS: ---> <Page>
JS: <Login> at components/Login.vue
JS: <Frame>
JS: <Root>
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: ReferenceError: state is not defined
System.err:
System.err: StackTrace:
System.err: Frame: function:'checkToken', file:'file:///app\components\Login.vue:27:0
System.err: Frame: function:'invokeWithErrorHandling', file:'file:///node_modules\nativescript-vue\dist\index.js:3364:25
System.err: Frame: function:'invoker', file:'file:///node_modules\nativescript- vue\dist\index.js:4030:13
System.err: Frame: function:'Observable.notify', file:'file:///node_modules\@nativescript\core\data\observable\observable.js:110:
Я только начинающий с nativescript- vue, пожалуйста помогите мне узнать, что является причиной этой проблемы и как я могу решить эту проблему.
Большое спасибо.
Аши sh A.