본문 바로가기

vuex state

(4)
vue - 새로고침시 vuex데이터 초기화 방지 프로젝트를 진행중 새로고침시 vuex state데이터가 초기화 된다는것을 알게 되었다. vuex 에서 관리하는 데이터 중 초기화되면 안되는 데이터가 있기에 이를 해결하는 방법을 찾아봣으며, 이곳에 기술하려고 한다. 검색 결과 vuex-persistedstate를 사용하면 된다고한다. vuex-persistedstate는 localstorage를 이용하여 초기화를 방지해주는 vue 플러그인이라고 한다. vuex-persistedstate를 사용하기 위해선 우선 프로젝트 파일에 설치를 진행해준다. 1. vuex-persistedstate 설치 npm install --save vuex-persistedstate 2. 적용 이번 글에서는 vuex store에 전역적으로 적용하려고 한다. 당연히 적용하고 싶은 ..
Vue - Vuex(state, mutations, action) Vuex에는 state, mutations, action, getters 등이 있다. 이에대해 공부한 내용을 적어보려고 한다. 1. state - Vuex에서 state는 데이터를 저장시키는 역할을 한다. - 데이터를 state안에 선언하여 저장할 수 있지만, mutation, action등을 통하여 state에 저장시킬 수 도 있다. 2. state안에 데이터 선언 export default { // 네임스페이스 트루를 넣어야함 namespaced: true, // 데이터가 들어가는곳 state: { // 회원가입시 저장할 데이터 signUpData: { // 회원가입시 선택한 회원 유형 selectType : "개인회원" }, }, } 3. mutations를 통한 state에 데이터 선언 - mut..
Vue - axios모듈 사용 저번 글에서 axios를 활용하기 위해 작성한 모듈을 사용해 보겠습니다. 1. Vuex action에서 axios를 호출하여 state에 데이터 저장 - vue 파일에서 Vuex action을 호출한다. - create시에 Vuex action을 호출한다. // test sorce // 비동기처리 -> DB작업을 할 때 created()사용한다. 페이지에 처음들어와 데이터를 로드할 때 사용하면 될듯 created() { // console.log(this.users), // getUsers methods 호출 this.getUsers(); }, methods: { // test sorce // vuex SampleUsers파일에 setUsers action을 호출한다. getUsers() { this.$..
Vue - Vuex action에서 state로 접근하기 1. Vuex action 에서 state에 직접 접근하여 state에 있는 데이터 가져오기 action에서 state에 직접 접근하여 state에 있는 데이터를 action으로 가져올 수 있는지 테스트를 해보았으며, 결과는 성공적이였다. - vuex state state에 있는 데이터를 action 으로 가져올 것이다. - vuex action action에 testAction이라는 함수를 만들어 state에 있는 데이터를 로그 찍어본다. state에서 action에 접근하기 위해서는 파라미터로 context를 받아와야하며 context.state와 같은 형식으로 접근하면 state에 있는 데이터를 가져올 수 있다. - vue script methods에 getTest라는 함수를 만들어 진행하였다...