NativeScript- Vue с Vuex и Ax ios состояние задания не определено ошибка - PullRequest
Новая
       38

NativeScript- Vue с Vuex и Ax ios состояние задания не определено ошибка

0 голосов
/ 03 марта 2020

Спасибо, что прочитали мой вопрос. Вот моя ситуация:

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.

1 Ответ

1 голос
/ 03 марта 2020

Правильное использование мутации таково: 

this.$store.commit(mutation, values);

В вашем случае: this.$store.commit('loadFromStorage');.

Также if(state.token) неверно: для доступа к свойству состояния необходимо предоставить выделенный получатель:

  • в currentUser. js
const getters = {
    getToken: (state) => state.token;
};
  • в логин. vue Вы можете использовать значение 
if (this.$store.getters.getToken)
...