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

Posted 2023-04-13

【中文标题】带有 Vuex 和 Axios 的 NativeScript-Vue 未定义状态错误

【英文标题】：NativeScript-Vue with Vuex and Axios giving state is not defined error

【发布时间】：2020-06-15 21:17:51

【问题描述】：

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

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.

【参考方案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)

【讨论】：

让我快点试试 MediaP90