Question

我遇到了Vue的问题。至此，我已经读过类似this之类的内容，详细介绍了您尝试在根实例上定义方法然后在本地范围内引用该方法时发生的错误。

我的问题略有不同，因为它是在本地范围内定义的，所以我不确定该怎么做。我也看过this和this。

这是我的App.vue：

<template>
  <div id="app">
    <router-link to="/Home">home</router-link>
    <router-link to="/Login">login</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}

console.log('app.vue loading')
</script>

我的main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import Home from './components/Home'
import Login from './components/Login'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App, Home, Login },
  template: '<App/>'
})

console.log('main js loading');

问题所在的组件：

<template>
  <div class="login">
    <head>
        <title>{{title}}</title>
    </head>
    <form for="login" id="loginMain">
      <label for="username">Username:</label>
      <input type="text" id="username"></input>
      <label for="password">Password:</label>
      <input type="password"></input><br/><br/>
      <button for="login" @click="processLogin">LOGIN</button>
      <button for="logout" @click="processLogout">LOGOUT</button>

    </form>
    <p> Your login status: {{ loginStatus }} </login></p>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters, mapActions, Vuex } from 'vuex'
import store from '@/store'

const Login = {
  delimiters: [ '[{','}]'],
  data () {
    title: 'Foo',
    msg: 'Bar'
  }
  name: 'Login',
  props: {
    // worry about this later
  },
  methods: {
    ...mapActions({
      processLogin : 'LOGIN_ACTION',
      processLogout : 'LOGOUT_ACTION'
    })
  },
  computed: {
    ...mapGetters({
    title: 'GET_TITLE',
    loginStatus: 'GET_LOGIN_STATUS'
  }),
 }
}

console.log('Login loading');

export default Login

虽然我不确定是否相关，但是我的商店是：

import Vue from 'vue'
import Vuex from 'vuex'
import Home from './components/Home'
import Login from './components/Login'

Vue.use(Vuex)

const store =  new Vuex.Store({
  state: {
    title: 'My Custom Title',
    loggedIn: false
  },
  mutations: {
    MUT_LOGIN: (state) => {
      state.loggedIn = true
    },
    MUT_LOGOUT: (state) => {
      state.loggedIn = false
    }
  },
  actions: {
   LOGIN_ACTION ({ commit }){
     store.commit('MUT_LOGIN')
   },
   LOGOUT_ACTION ({ commit, state }) {
     store.commit('MUT_LOGOUT')
   }
  },
  getters: {
    GET_LOGIN_STATUS: state => {
      return state.loggedIn
    },
    GET_TITLE: state => {
      return state.title
    }
  }
})

console.log('store loading');

export default store

我知道我曾经有过一些错误，可以通过重新访问每个import语句并对我的连接方式进行一些更正来摆脱它们。现在和现在之间的唯一其他区别是，我正在通过Webpack运行所有这些文件，并将它们与Django一起在模板中提供。（使用所有控制台的原因，请确保所有文件都通过Webpack存放在其中。）

下面的图像是它正在咆哮的一些具体情况。

由于来自devtools错误的链接，我查看了this，并尝试将本地data（）属性添加到组件本身。

Answer 1

更改

data () {
  title: 'Foo',
  msg: 'Bar',
},

到

data () {
  return {
    title: 'Foo',
    msg: 'Bar',
  }
},

将解决“标题”错误。

对于动作问题，我什么也没跳出来。您可以尝试mapGetters看看是否可以使用吸气剂吗？

Vue警告：属性或方法'processLogout'未在实例上定义，但在渲染期间定义

1 个答案: