如何解决在vuejs3 / vee-validate 4应用程序的提交方法中如何获取vuex对象?
在vuejs3 / vee-validate 4应用程序中,提交表单后,我尝试使用vuex发送请求,并 失败,因为我无法访问存储对象。我这样做:
<template>
<Form @submit="onSubmit" :validation-schema="schema" class="login">
<label class="col-form-label" for="email">Email:</label>
<Field
id="email"
name="email"
type="email"
v-model="email"
class="form-control editable_field"
placeholder="Your email address"
autocomplete=off
/>
<ErrorMessage name="email" class="validation_error"/>
...
<label class="col-form-label" for="password">Password:</label>
<Field
id="password"
name="password"
type="password"
v-model="password"
class="form-control editable_field"
placeholder="Your password"
autocomplete=off
/>
<button>Submit</button>
</Form>
</template>
<script>
import appMixin from '@/appMixin'
import app from './../../App.vue'
import store from '@/main' // THAT DOES NOT WORK
import { /* ref,*/ onMounted } from 'vue'
import { Field,Form,ErrorMessage } from 'vee-validate'
import * as Yup from 'yup'
import mitt from 'mitt'
const emitter = mitt()
export default {
name: 'loginPage',mixins: [appMixin],data: function () {
return {
email: 'email@site.com',password: '111111'
}
},components: {
Field,ErrorMessage
},setup () {
let self = this
const schema = Yup.object().shape({
email: Yup.string().email().required().label('Email Address'),password: Yup.string().min(5).required().label('Your Password')
})
const loginInit = async () => {
console.log('loginInit emitter::')
console.log(emitter)
}
function onSubmit (credentials) {
alert(JSON.stringify(credentials,null,2))
console.log('this::')
console.log(this) // UNDEFINED
console.log('self::')
console.log(self) // UNDEFINED
console.log('app::')
console.log(app) // I see in console : https://prnt.sc/vf1gx3
console.log('store::')
console.log(store) // UNDEFINED
app.$store.dispatch('login',credentials)
.then(() => this.$router.push('/'))
// this.$router.push({path: '/admin/tasks'}) // DEBUGGING
// .then(() => this.$router.push('/admin/tasks'))
.catch(error => console.log(error))
}
onMounted(loginInit)
return {
schema,onSubmit
}
}
}
</script>
在src / main.js中,我有:
import { createApp } from 'vue'
import { createStore } from 'vuex'
import axios from 'axios'
import App from './App.vue'
import router from './router/router.js'
import { settingCredentialsConfig } from '@/app.settings.js'
const store = createStore({
state () {
return {
status: '',token: localStorage.getItem('token') || '',...
所以在控制台中我出现了错误:
我在控制台中看到:https://prnt.sc/vf1gx3
package.json:
{
"dependencies": {
"axios": "^0.20.0-0","bootstrap": "^4.3.1","core-js": "^3.6.5","font-awesome": "^4.7.0","jquery": "^3.4.1","mitt": "^2.1.0","moment-timezone": "^0.5.31","node-sass": "^4.12.0","popper.js": "^1.16.0","sass-loader": "^10.0.4","vee-validate": "^4.0.0-beta.18","vue": "^3.0.0","vue-router": "^4.0.0-rc.1","vuex": "^4.0.0-rc.1","yup": "^0.29.3"
},}
src / main.js:
import { createApp } from 'vue'
import { createStore } from 'vuex'
import axios from 'axios'
import App from './App.vue'
import router from './router/router.js'
import 'bootstrap'
import 'font-awesome/css/font-awesome.css'
import { settingCredentialsConfig } from '@/app.settings.js'
const store = createStore({
state () {
return {
status: '',user: null,}
},mutations: {
auth_request (state) {
state.status = 'loading'
},auth_success (state,data) {
state.status = 'success'
state.token = data.token
localStorage.setItem('token',data.token)
state.user = data.user
localStorage.setItem('user',JSON.stringify(data.user))
},auth_error (state) {
state.status = 'error'
}
},actions: {
login ({ commit },userCredentials) { // Login action
return new Promise((resolve,reject) => {
commit('auth_request')
let apiUrl = process.env.VUE_APP_API_URL
console.log('+login userCredentials::')
console.log(userCredentials)
console.log('+login settingCredentialsConfig::')
console.log(settingCredentialsConfig)
console.log('+login apiUrl::')
console.log(apiUrl)
// alert('apiUrl::' + apiUrl)
axios.post(apiUrl + '/login',userCredentials,settingCredentialsConfig)
.then((response) => {
if (typeof response.data.access_token === 'undefined' || typeof response.data.user === 'undefined') {
commit('auth_error') // call auth_error mutation to make changes to vuex store
// bus.$emit('authLoggedError')
return
}
const token = response.data.access_token
const user = response.data.user
axios.defaults.headers.common['Authorization'] = token
commit('auth_success',{
token: token,user: user
}) // call auth_success mutation to make changes to vuex store
// bus.$emit('authLoggedSuccess',user)
resolve(response)
})
.catch((error) => {
commit('auth_error') // call auth_error mutation to make changes to vuex store
localStorage.removeItem('token')
// bus.$emit('authLoggedError')
reject(error)
})
})
},// login ({ commit },user) { // Login action
addUser (context,payload) {
context.commit('addUser',payload)
}
},getters: {
user (state) {
return state.user
}
}
})
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
解决方法
由于您使用的是合成API,因此应使用useStore
钩子
import {useStore} from 'vuex'
export default {
setup(){
const store=useStore();
store.dispatch("action",payload);//instead of app.$store.dispatch("action",payload)
}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。