Vue.js 无法读取属性';调度';Vuex中未定义的
我正在尝试对vuex store中的“logOutUser”执行分派,并在respone中收到以下错误消息: TypeError:无法读取未定义的属性“dispatch” deleteUser.vue(分派操作未从中运行的组件): user.js:Vue.js 无法读取属性';调度';Vuex中未定义的,vue.js,vuex,Vue.js,Vuex,我正在尝试对vuex store中的“logOutUser”执行分派,并在respone中收到以下错误消息: TypeError:无法读取未定义的属性“dispatch” deleteUser.vue(分派操作未从中运行的组件): user.js: const firebase=require('../firebaseConfig.js') const state = { currentUser: null, userProfile: {} } const actions =
const firebase=require('../firebaseConfig.js')
const state = {
currentUser: null,
userProfile: {}
}
const actions = {
fetchUserProfile({commit, state}, uid){
firebase.firestore.collection("users").doc(uid).get().then((doc)=>{
commit('setUserProfile', doc.data())
}).catch((error)=>{
console.error(error)
})
},
logOutUser({commit, state}){
commit('setCurrentUser', null)
commit('setUserProfile', {})
console.log('Logged Out In Vuex')
}
}
const mutations =
{
setCurrentUser(state, val){
state.currentUser = val
},
setUserProfile(state, val){
state.userProfile = val
}
}
export default {
namespaced: true,
state,
actions,
mutations
}
编辑:这是我的main.js文件:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store.js'
const firebase = require('./firebaseConfig.js')
Vue.config.productionTip = false
let app
firebase.auth.onAuthStateChanged(user => {
if(!app){
/* eslint-disable no-new */
app = new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
}
});
从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“./store.js”导入存储
const firebase=require('./firebaseConfig.js')
Vue.config.productionTip=false
让应用程序
firebase.auth.onAuthStateChanged(用户=>{
如果(!应用程序){
/*eslint禁用无新*/
app=新Vue({
el:“#应用程序”,
路由器,
商店,
组件:{App},
模板:“”
})
}
});
我应该提到的是,我正在从我的应用程序中的另一个组件发送此操作,并且它在那里工作得非常好
谢谢大家! 这是因为您可能没有向Vue的根实例添加
store
选项。通过提供它,您将能够从root的所有子组件访问存储。因此,您的根实例应该如下所示:
从“/store”导入存储
const app=新的Vue({
/*……其他财产*/
商店
})
现在您可以在您的组件中自由使用
这个。$store
。所以我尝试了您的所有解决方案,但似乎没有任何效果。我开始怀疑这个问题与deleteUser.vue不是App.vue的直接子项有关。我最终将store直接导入组件的任何人:
import store from '../../store.js'
它解决了这个问题。
我想知道是否有人知道一种更有效的方法来解决这个问题。
谢谢你的帮助 另一方面
firebase.auth.onAuthStateChanged(user => {
if(!app){
/* eslint-disable no-new */
app = new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
}
});
firebase.auth.onAuthStateChanged(用户=>{
如果(!应用程序){
/*eslint禁用无新*/
app=新Vue({
el:“#应用程序”,
路由器,
商店,
组件:{App},
模板:“”
})
}
});
我打赌你从一些教程中得到了这段代码,因为我也遇到过这种情况,但它会使你的应用程序在重新加载页面时慢得多,因为它会再次重新加载所有内容
我建议您在路由器中使用onAuthStateChanged事件(是的,这是可能的),然后在那里检查是否存在可能的路由块,这样会快得多
我不在家,不想看代码示例,但如果您愿意,我可以在今天晚些时候发送一些。如果我们要遵循vueX建议的应用程序结构 存储将自动注入
我猜要么是未初始化存储,要么是错误的
此
上下文
为了调试,我尝试使用mapActions
helper
:
我也有同样的问题,我甚至问了我自己的Stackoverflow问题,直到我自己最终找到了解决方案,也没有用,我已经发布了 贴出的答案内容如下: 我为这个问题苦苦挣扎了两天,终于找到了解决办法 我的问题是因为我在使用
$navigateTo
时没有指定框架,而是在导航整个组件。我发现store只绑定到main.js中传递给render函数的第一个组件
下面是我的main.js的样子:
new Vue({
store,
render: h => h('frame', [h(store.state.is_logged_in ? Main : Login)]),
created() {
this.$store.commit('setNav', this.$navigateTo);
if (this.$store.state.is_logged_in) {
this.$store.dispatch('init');
}
},
}).$start();
我发现如果is_logged_是真的this.$store
,或mapActions
等只在Main
及其子组件中工作,否则它只在Login
及其子组件中工作。然后我正在阅读,在示例的存储中看到了以下代码:
import Vue from 'nativescript-vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({...});
Vue.prototype.$store = store;
module.exports = store;
所以我添加了行Vue.prototype.$store=store代码>到我自己的商店定义,最后我的问题解决了。这真的让我很难过。希望我能救人。不清楚为什么它没有定义,为什么它在使用模块时有效,但在没有模块的情况下有效。这可能与构建过程/传输程序有关。如果use
实际上是Vue
类的一个静态方法,那么$store
将通过use
安装插件在所有实例中共享,但情况并非如此。看起来Vue
应该是Vue模块导出的类,但它的行为似乎像一个实例
我发现工作的方式有以下几种(最好是#3):
1.调用Vue。在使用Vuex的地方使用
src
├── App.vue
├── main.js这样做
让那=这
然后用它来做调度
那.$store.dispatch(action)我也有这个问题,结果是我用大写而不是小写名称导入了Vue和Vuex。这是正确的导入方式,但是没有错误告诉您这是一个可能的问题,因此很难发现。我知道这不应该是大写,但任何人都可能打字错误,没有迹象表明这是问题所在
这就是我所拥有的:(所以不要复制这个代码,它不会工作)
正确的方法:
import Vue from 'vue';
import Vuex from 'vuex'; //<-- not Sentence case from '[V]uex' but '[v]uex'
从“Vue”导入Vue;
从“Vuex”导入Vuex// 我也面临同样的问题,因为我错过了导入“商店”。解决方法如下:
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App),
})
你好事实上我正在这么做。它在我的main.js文件中,我会将它添加到原始问题中。@TomHarpaz,我不知道。很抱歉,我无法提供更多帮助。应该被接受,在我的情况下,它解决了问题。那么问题是什么?对于路人:如果您错误地格式化了方法函数的语法,您也可以得到此警告。如果您使用fun:()=>{this.X}
您可能不在this
的适当上下文中。改为使用fun(){this.X}
。是的,我从一个教程中获得了它。感谢您的建议,如果可能的话,我希望看到这样一个例子:)此实现是出于安全原因。->检查用户是否正在登录
import Vue from 'nativescript-vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({...});
Vue.prototype.$store = store;
module.exports = store;
// store/index.js
import Vue from "vue"; // This module's Vue is not the same instance as that referenced in main.js
import Vuex from "vuex";
import myModule from "./myModule.js";
// Required before creating new store instance
Vue.use(Vuex);
export const store = new Vuex.Store(myModule);
// main.js
import Vue from "vue"; // this module's Vue is different from store/index.js' Vue
import Vuex from "vuex";
import app from "./App";
import router from "./router/index.js";
import { store } from "./store/index.js";
// this part is essential despite already calling Vue.use in store/index.js
Vue.use(Vuex);
// Or, see alternative below
new Vue({
...,
router,
store,
components: { app }
});
Vue.prototype.$store = store;
// global.js
import vue from "vue";
export const Vue = vue;
// or if you're not using babel, you can use real javascript…,
export { Vue } from "vue";
// store/index.js
import { Vue } from "../global.js";
import vuex from "vuex";
import myModule from "./myModule.js";
Vue.use(vuex);
export const store = new vuex.Store(myModule);
// main.js
import { Vue } from "./global.js";
import store from "./store/index.js";
import router from "./router/index.js";
import app from "./App";
new Vue({
...,
router,
store,
components: { app }
});
import Vue from 'Vue';
import Vuex from 'Vuex';
import Vue from 'vue';
import Vuex from 'vuex'; //<-- not Sentence case from '[V]uex' but '[v]uex'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App),
})