programing

모듈 모드 Vuex로 전환 중입니다.VueJS에 저장

elecom 2023. 6. 17. 08:16
반응형

모듈 모드 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

반응형