• Vuex overview
• nuxt
• access state from another module in Nuxt

Vuex overview

참조 : https://vuex.vuejs.org

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

Vuex는 state 관리 패턴이자 라이브러리 입니다. 모든 components에서 접근할 수 있도록 중앙에서 관리하는 store로서 기능을 수행합니다. state값의 변경을 보장하는 규칙들이 있고 예상 가능한 방식으로 진행됩니다.

nuxt

참조 : Vuex Store - NuxtJS

Using a store to manage the state is important for every big application. That’s why Nuxt.js implements in its core.Vuex

To get started, simply export the state as a function, and the mutations and actions as objects in store/index.js:

state는 함수로, mutations와 actions는 객체로 export한다.

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

access state from another module in Nuxt

Access State from Another Module in Nuxt - Justin - Medium

Having set your store using module option, the ideal place to access state from another module is in action handler. There we have access to the rootState property that is exposed by the context received in the function. It is worthy of note that rootState is only available in modules option.

모듈 옵션을 사용해서 store를 세팅할 때 다른 모듈로부터 state에 접근하기 위한 좋은 곳은 action handler이다. 여기서 함수에서 받은 context에 의해 노출되는 rootState 속성에 접근할 수 있다.

Assuming you want to access state.users in users.js from admin.js

//users.js
export const state = () => ({
	users :'',
})

//admin.js
export const actions = {
	setUsers({ rootState }) {
		Let users = rootState.users.users
	}
}