Vuex 스토어에 여러 상태를 설정할 수 있습니까?

Vuex 스토어에 여러 상태를 설정할 수 있습니까?

의 범용 스토어를 작성했습니다.Products내 웹 앱에서.당연히 웹 사이트에는 다양한 페이지에 표시해야 하는 다양한 유형의 제품이 있습니다.그래서 저는 각각의 상태를 나타내는 여러 개의 상태를 갖게 되었습니다.제 매장은 이쪽입니다.

const state = {
    HomepageOffers:[],
    Product: []
};

const getters = {
    getHomepageOffers: (state) => state.HomepageOffers,
    getProduct: (state) => state.Product

};

const actions = {
    loadHomepageOffers({commit}) {          // get all products to be featured on homepage
        axios.get('/api/homepageoffers')
            .then(response => {
                commit('setHomepageOffers', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
            }
        )
    },
    loadProduct(context, {ProductID}) {    // gets a single product based on ProductID passed in URL
        axios.get(`/api/${ProductID}`)
            .then(response => {
                context.commit('setProduct', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        )
    }
};

const mutations = {
    setHomepageOffers(state, HomepageOffers) {
        state.HomepageOffers = HomepageOffers
    },
    setProduct(state, Product) {
        state.Product = Product
    }
};

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

무슨 일이 일어나고 있는 거죠?사용자가 내 컴퓨터에 접속했을 때/home페이지,HomepageOffers상태가 제품 데이터로 채워집니다.엄청나.

사용자가 특정 제품을 클릭하면Product상태는 단일 제품 항목으로 채워지고 그 다음/Product.vue컴포넌트가 로딩됩니다.좋아요.

제가 유일하게 깨달은 것은 하나의 제품을 가져오면HomepageOffers상태는 비어 있지 않습니다.모든 제품이 아직 저장되어 있습니다.이렇게 하는 게 맞는 것 같은데, 제 질문은 다음과 같습니다.스토어당 하나의 스테이트만 있는 것이 안전/베스트 프랙티스입니까?아니면 스토어에 여러 스테이트가 있어도 괜찮습니까?

Vuex는 템플릿이나 UI가 없는 글로벌 컴포넌트라고 생각하면 됩니다.다른 컴포넌트에서는 Vuex의 데이터에 액세스 할 수 있습니다.Vuex 스토어는 컴포넌트를 한 곳에 배치하여 컴포넌트 정보(데이터와 동작)를 공유할 수 있는 방법을 제공합니다.

이 기능은 관련이 없는 여러 구성 요소에 고유하지 않은 데이터를 포함하려는 경우 특히 유용합니다.예를 들어 로그인한 사용자 이름입니다.그것을 복제하여 그것을 표시하는 모든 컴포넌트나 그 컴포넌트에 전달하려고 하는 것이 아니라 한 곳에 두는 것이 좋습니다.그들은 모두 직접 가게에 가서 그것을 회수할 수 있다.

부모/자녀 관계가 없는 컴포넌트 간에 데이터를 공유할 필요가 있는 경우emit이벤트나 소품을 서로 전달하면 글로벌 데이터를 얻을 수 있을 것입니다.컴포넌트가 다른 경로 또는 다른 섹션에 있을 수 있습니다.Vuex를 사용하면 모두 단일 소스에서 글로벌 정보 및 메서드에 액세스할 수 있습니다.

이러한 비교를 염두에 두면 Vuex의 "컴포넌트"는 알기 쉬워지지만 이름은 다릅니다.

• state그냥data
• getters그냥computed
• actions그냥methods

개념적으로는 그게 전부야주요 차이점은 Vuex에서는 변경되지 않는다는 것입니다.state of mutations.

여러 개의 '아예'가 수 .data 또는 "" " " ""methods컴포넌트에 개의 컴컴에 in in in in in in 、 in in 、 in in in in in in 。state 또는 "" " " ""actions가게 안에서요, 그건 예상된 일이에요.관리를 용이하게 하기 위해 스토어를 세분화하고 특정 용도나 기능에 특정 부분을 할당하고 싶다면 Vuex 모듈을 사용하여도 할 수 있지만 여전히 글로벌합니다.

언급URL : https://stackoverflow.com/questions/60804077/can-i-have-multiple-states-in-a-vuex-store