NativeScript-Vue with Vuex and Axios giving state is not defined error

Question

Thank you for reading my question. Here is my situation:

Nativescript Cli version:6.0.1

Vue: 4.1.2

Npm version: 6.13.4

backend: Laravel 6.13.1 with passport

Im following this tutorial https://dev.to/_phzn/persisting-data-between-app-launches-with-nativescript-vue-2j52

My code for login.vue component screen as per the tutorial:

   <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>

This is my currentUser.js script, i decided to use currentUser instead of store.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;

and my main.js looks like this

  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()

My issue:

when i am running tns debug android command, i get the error that says TypeError: this.$store.state.commit is not a function. The this.$store.state.commit part is used in checkToken() in the login.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:

Im just a starter with nativescript-vue, please help me learn what is causing this issue and how i can resolve this.

Thank you very much.

Ashish A.

Answer 1

The correct use of a mutation is this:

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

In your case: this.$store.commit('loadFromStorage');.

Also if(state.token) is wrong: to access the state property you have to provide a dedicated getter:

• in currentUser.js

const getters = {
    getToken: (state) => state.token;
};

• in login.vue you can use the value

if (this.$store.getters.getToken)