반응형
모듈 모드 Vuex로 전환 중입니다.VueJS에 저장
VueJS에 있는 Vuex Store의 모듈 모드로 전환할 수 있는 솔루션을 찾고 있습니다.왜냐하면 나는 NuxtJS를 사용하기 때문에 기본 스토어는 클래식 모드가 될 것입니다.
저는 이 지침을 따릅니다: https://nuxtjs.org/guide/vuex-store#modules-mode 하지만 그것은 작동하지 않습니다.
당신의 남자가 나를 도와주길 바랍니다!
~/store/index.js
export const AuthenticationStore = new Vuex.Store({
state: {
authUser: null,
userInfo: null,
token: null
},
mutations: {
SET_USER: function (state, user) {
state.authUser = user
},
SET_TOKEN: function (state, token) {
state.token = token
instance.defaults.headers = { Authorization: 'Bearer ' + token }
}
},
actions: {
async nuxtServerInit ({ commit }, { req }) {
try {
const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('token='))
if (jwtCookie) {
let token = jwtCookie.split('=')[1]
let payload = jwtDecode(token)
let date = Date.now() / 1000
if (payload.exp > date) {
commit('SET_USER', payload)
commit('SET_TOKEN', token)
instance.defaults.baseURL = backendURL
}
}
} catch (error) {
console.log('nuxtServerInit Failed')
}
},
async login ({ commit }, { username, password }) {
try {
const { data } = await axios.post('http://localhost:8000/api/v1/api-token-auth/login', {
username,
password
})
let payload = jwtDecode(data.token)
Cookie.set('token', data.token, {
expires: null
})
commit('SET_TOKEN', data.token)
commit('SET_USER', payload)
} catch (error) {}
},
async logout ({ commit }) {
Cookie.remove('token')
commit('SET_USER', null)
commit('SET_TOKEN', null)
window.location.href = '/'
}
},
modules: {
...
}
})
오류:
[vuex] unknown action type: login구성 요소에서 작업을 디스패치할 때:
async login () {
try {
await this.$store.dispatch('login', {
username: this.signupUsername,
password: this.signupPassword
})
this.signupUsername = ''
this.signupPassword = ''
} catch (e) {}
}
쓰기가 가능한 모듈로 전환하고 싶습니다.export const storeconststore를 내 프로젝트의 다른 js 파일로 가져오기 위해.
모듈식 접근 방식을 사용하고 있으므로 다음과 같이 추가해야 합니다.{ root : true}뿌리 작용, 돌연변이, 게터 등에 접근하기 위해.예:
$store.dispatch('login', {username: this.signupUsername, 암호: this.signupPassword}, {root: true})
`
언급URL : https://stackoverflow.com/questions/48637323/switching-to-modules-mode-vuex-store-in-vuejs
반응형
'programing' 카테고리의 다른 글
| Android 앱이 Firebase에 연결되지 않음 (0) | 2023.06.17 |
|---|---|
| Oracle에서 Check 문에 하위 조회 사용 (0) | 2023.06.17 |
| Firebase 원격 구성:값을 읽을 수 없지만 가져오기는 성공했습니다. (0) | 2023.06.12 |
| typescriptsconfig.json include exclude 작동하지 않음 (0) | 2023.06.12 |
| 레일즈에서 상대적인 시간은 어떻게 됩니까? (0) | 2023.06.12 |