带有 Vuex 和 Axios 的 NativeScript-Vue 未定义状态错误

Question

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

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

根据教程，我的 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) 也是错误的：要访问 state 属性，您必须提供专用的 getter：

• 在 currentUser.js 中

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

• 在login.vue你可以使用值

if (this.$store.getters.getToken)