如何从 vue js 中的登录组件更新用户状态？
How to update a user state from a login component in vue js?
我正在尝试从此处的登录组件更新用户 vuex 状态。我对 vuex 的经验很少，所以我在这个过程中几乎没有迷失......这就是我尝试的方式：
顺便说一下，我正在尝试使用 (https://github.com/devjin0617/vue2-admin-lte) ，但是我只是向项目添加了一个登录组件
user.js
`const mutations = {
set: (state, user) =>{
state.main = Object.assign({}, state.main, user)
}
actions.js
export const updateCurrentUser = ( {commit}, form ) => {
commit('setUser',form)
}
突变类型
export const UPDATE_USER = 'UPDATE_USER'
最后在 Login.vue 组件中我有 login() 方法，我试图在其中调用操作
Login.vue
methods:{
...mapActions([
'updateCurrentUser'
]),
logIn() {
this.$store.commit() // I dont know which parameters to call here
this.currentUser.mutations.set(this.form) // I´ve tried this, but doesn´t work
}
`
我想更新用户，但目前我能够访问 setter 方法
我不知道我是否遵循正确的方法解析顺序来完成这项工作...
调用程序的顺序我还是输了
从你给出的代码来看，你的代码和文件有点乱，我看到你正在尝试将 vuex 与模块一起使用，但是你做的方式似乎不对，无法真正分辨，因为我看不到您的文件夹和文件结构。
让我们从一个简单的实现方法开始。
1。在 src 文件夹
中创建一个 store 文件夹
2。创建一个突变类型 const js src/store/mutation-types.js
Inside your mutation-types.js put this code
export const UPDATE_USER = 'UPDATE_USER'
3。在您的商店文件夹中创建一个 index.js 文件
4。在你的 src/store/index.js 里面你输入了下面的代码
index.js
// import your mutation type name constants
import * as types from './mutation-types'
export default new Vuex.Store({
state: {
user: {} // default empty object
},
getters: {
//...other getters...
},
mutations: {
// mutating your user state
[types.UPDATE_USER](state, user) {
state.user = user
}
},
actions: {
},
})
5。确保在 main.js
中导入 vuex 的商店
Inside your main.js
import store from './store'
// other codes
// export Vue
export default new Vue({
el: '#app',
router,
store, // add your store
components: {App},
template: '<App/>'
})
6.在你的组件中提交
Login.vue
methods:{
logIn() {
// let say you have gotten your user data
// then you can commit it into vuex storage by using the mutation constant name you defined
let userData = {user_id: 1}
this.$store.commit('UPDATE_USER', userData)
}
}
就是这样，刚开始的时候保持简单，不要尝试任何花哨的东西，比如模块。
最后的解决方案是这样的：
1- vuex/modules/user.js
import firebase from 'firebase'
const state = {
user:null
}
const getters = {
user: state => {
return state.user
}
}
// mutations
const mutations = {
'SET_USER' (state, user) {
state.user = user
}
}
// actions
const actions = {
setUser: ( {commit}, user ) => {
if (user){
let fireUser = null
firebase.firestore().collection("users").doc(user.uid).get()
.then( doc => {
fireUser = doc.data()
commit('SET_USER', fireUser)
}).catch( err => {
console.log(err)
})
}
console.log(state.user)
}
}
export default {
state,mutations,actions,getters
}
2- vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
// debugger
export const store = new Vuex.Store({
modules:{
user
}
})
3- App.vue
// 所以这里是当用户登录 firebase 时触发事件的地方
created(){
let _this = this
window.firebase.auth().onAuthStateChanged( user => {
// set user credentials
if (user){
if (_this.$store)
_this.$store.dispatch('setUser', user)
} else {
if(_this.$store)
_this.$store.dispatch('setUser', null)
}
})
}
我不知道这是否是最好的实施方式，但目前可以使用
我正在尝试从此处的登录组件更新用户 vuex 状态。我对 vuex 的经验很少，所以我在这个过程中几乎没有迷失......这就是我尝试的方式：
顺便说一下，我正在尝试使用 (https://github.com/devjin0617/vue2-admin-lte) ，但是我只是向项目添加了一个登录组件
user.js
`const mutations = {
set: (state, user) =>{
state.main = Object.assign({}, state.main, user)
}
actions.js
export const updateCurrentUser = ( {commit}, form ) => {
commit('setUser',form)
}
突变类型
export const UPDATE_USER = 'UPDATE_USER'
最后在 Login.vue 组件中我有 login() 方法，我试图在其中调用操作
Login.vue
methods:{
...mapActions([
'updateCurrentUser'
]),
logIn() {
this.$store.commit() // I dont know which parameters to call here
this.currentUser.mutations.set(this.form) // I´ve tried this, but doesn´t work
}
`
我想更新用户，但目前我能够访问 setter 方法
我不知道我是否遵循正确的方法解析顺序来完成这项工作...
调用程序的顺序我还是输了
从你给出的代码来看，你的代码和文件有点乱，我看到你正在尝试将 vuex 与模块一起使用，但是你做的方式似乎不对，无法真正分辨，因为我看不到您的文件夹和文件结构。
让我们从一个简单的实现方法开始。
1。在 src 文件夹
中创建一个 store 文件夹
2。创建一个突变类型 const js src/store/mutation-types.js
Inside your
mutation-types.jsput this code
export const UPDATE_USER = 'UPDATE_USER'
3。在您的商店文件夹中创建一个 index.js 文件
4。在你的 src/store/index.js 里面你输入了下面的代码
index.js
// import your mutation type name constants
import * as types from './mutation-types'
export default new Vuex.Store({
state: {
user: {} // default empty object
},
getters: {
//...other getters...
},
mutations: {
// mutating your user state
[types.UPDATE_USER](state, user) {
state.user = user
}
},
actions: {
},
})
5。确保在 main.js
中导入 vuex 的商店Inside your
main.js
import store from './store'
// other codes
// export Vue
export default new Vue({
el: '#app',
router,
store, // add your store
components: {App},
template: '<App/>'
})
6.在你的组件中提交
Login.vue
methods:{
logIn() {
// let say you have gotten your user data
// then you can commit it into vuex storage by using the mutation constant name you defined
let userData = {user_id: 1}
this.$store.commit('UPDATE_USER', userData)
}
}
就是这样，刚开始的时候保持简单，不要尝试任何花哨的东西，比如模块。
最后的解决方案是这样的：
1- vuex/modules/user.js
import firebase from 'firebase'
const state = {
user:null
}
const getters = {
user: state => {
return state.user
}
}
// mutations
const mutations = {
'SET_USER' (state, user) {
state.user = user
}
}
// actions
const actions = {
setUser: ( {commit}, user ) => {
if (user){
let fireUser = null
firebase.firestore().collection("users").doc(user.uid).get()
.then( doc => {
fireUser = doc.data()
commit('SET_USER', fireUser)
}).catch( err => {
console.log(err)
})
}
console.log(state.user)
}
}
export default {
state,mutations,actions,getters
}
2- vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
// debugger
export const store = new Vuex.Store({
modules:{
user
}
})
3- App.vue
// 所以这里是当用户登录 firebase 时触发事件的地方
created(){
let _this = this
window.firebase.auth().onAuthStateChanged( user => {
// set user credentials
if (user){
if (_this.$store)
_this.$store.dispatch('setUser', user)
} else {
if(_this.$store)
_this.$store.dispatch('setUser', null)
}
})
}
我不知道这是否是最好的实施方式，但目前可以使用