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

Question

感谢您阅读我的问题。这是我的情况：

Nativescript Cli version: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

根据教程，我的 login.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 而不是 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;

我的 main.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 is not a function。 this.$store.state.commit 部分用于 login.vue

中的 checkToken()

     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 的初学者，请帮助我了解导致此问题的原因以及如何解决此问题。

非常感谢。

Ashish A.

Answer 1

突变的正确用法是这样的：

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

你的情况：this.$store.commit('loadFromStorage');.

另外 if(state.token) 是错误的：要访问状态属性你必须提供专用的 getter:

在currentUser.js

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

在login.vue中你可以使用值

if (this.$store.getters.getToken)

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

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

vue.js

nativescript

axios

vuex

nativescript-vue