Quasar와 함께 성분 저장 사용

Quasar와 함께 성분 저장 사용

Quasar 프로젝트에서 Vuex 스토어를 구현하려고 합니다.Quasar-cli를 사용하여 새로운 프로젝트를 만들고 Vuex 박스를 체크했습니다.그런 다음 Quasar 웹 사이트(https://quasar.dev/quasar-cli/cli-documentation/vuex-store)에 있는 가이드를 따라 다음을 사용하여 새로운 스토어를 만들었습니다.quasar new store test그리고 스토어 모듈을 store/index.js에 등록했습니다.

export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      test
      // example
    },

그 후 튜토리얼에서 참조한 대로 변환과 상태 코드를 추가했습니다.그리고 새로운 컴포넌트(테스트)를 생성하여 설명대로 코드를 추가하였습니다.

하지만 사용할 수 없습니다.this.$storeIDE에서 $store가 정의되어 있지 않다는 경고를 받습니다.Main.js의 오브젝트에 상태를 추가하면 모든 컴포넌트에 상태를 전달할 수 있다는 Vuex 문서를 읽어 보았습니다.내가 볼 때 퀘이사는 이미 이 일을 하고 있다.

그렇다면 제가 무엇을 잘못하고 있으며, 각 컴포넌트에 대해 수동으로 Import하지 않고 어떻게 스토어를 사용할 수 있을까요?

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // general state
    app
},
mutations: {
    someMutation (state, store) {

    }
  },
 actions: {
    someAction ({commit}) {

    },
})
export default store

이 스토어를 app.js에 포함시키는 것도 잊지 마세요.

작동시키는 데 시간이 걸렸지만 여기 내 상태의 예가 있습니다.

    user :
        {
            uid: '',
            name: '',
            accountType: ''
        }
}

const mutations = {
    setName (state, val) {
        state.user.name = val
    },
    setUID (state, val) {
        state.user.uid = val
    },
    setAccountType (state, val) {
        state.user.accountType = val
    }
}

const actions = {
}

const getters = {
    user: (state) => {
        return state.user
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

각 파일에서 이 정보에 액세스하려면

    computed : {
      user () {
            return this.$store.getters['user/user']
        }
    }

이 정보를 태그에 표시하려고 합니다.이러한 정보는,

<template>
    <div class="user-profile">
        {{ user.name }}
        {{ user.email }}
        {{ user.accountType }}
    </div>
</template>

도움이 됐으면 좋겠네요

모듈이 있는 폴더보다는 하나의 파일 'store-user.js'와 store/index.js에 모두 있습니다.import user from './store-user'그리고.

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      user
    }

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

Vue.use(Vuex)가 누락되었습니다.

Vuex는 스토어 옵션을 사용하여 루트 컴포넌트에서 모든 하위 컴포넌트에 스토어를 "인젝트"하는 메커니즘을 제공합니다(Vue.use(Vuex)에 의해 활성화됨).

언급URL : https://stackoverflow.com/questions/56623102/using-store-in-component-with-quasar