[Vue]11.14 VUEX

 

Vuex

-vue.js application 상태(data)관리패턴+라이브러리

-모든 컴포넌트들의 중앙 저장소 역할

 

이전에 사용한 방식

Vuex

공식문서 사이트 - https://v3.vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

vuex핵심 컨셉

State - data

이전 vue에서는 데이터 변경은 methods 호출

-> vuex - Actions(비동기(axios)),Mutations(동기/data변경) *Actions에서 State로 data변경은 권장하지않는다

1114배포 -vuex핵심컨셉 확인

Getters

Computed와 유사 - state를 변경하지 않고 활용하여 계산을 수행

 

vuex사용시 해야할 것

main.js

1.router store. 추가

store-index.js

2.import Vuex - 플젝 만들 때 만들어져 있으니 주석 부분 작성

 

Vuex설치

CDN

npm = npm install vuex --save

##bootstrapvue - icon - Font Awesome - start메뉴 하단 vue.js 사용법

 

step01 - state 직접 연결

$store -store/index.js

step01구조

 

##Getters

##mutations - 일반적으로 대문자

store/step04,05

step04

step05

 

##Action

새로고침해도 삭제X

키 소스코드 안에 직접 쓰지말고.env.local에 작성 앞 VUE_APP은 필수 뒤는 자유

store/index.js