store(vuex)

store

설치

npm i vuex

vuex 는 상태관리 도구이다.

여러 컴포넌트간에 공유되는 데이터 속성

store/index.js

vuex는 플러그인 형태로 제공

Vue.use(Vuex); // 로 vuex사용 

export const store = new Vuex.store({
 // 인스턴스를 내보낸다.
})

main.js 에 등록해줌

import store from './store/index.js';

new Vue({
  router,
  store, // store 등록 // 원래 store: store 이지만 앞뒤가 같으니 생략가능 
  render: h => h(App)
}).$mount('#app')

store 에 api 저장후에 view에서 불러오기

state:{
    news: []
},
mutations: {
    SET_NEWS(state, news) {
       state.news = news;
    }
},
actions : {
    FETCH_NEWS() {
      fetchNews()
      .then(response => {
          console.log(response);
          context.commit('SET_NEWS', response.data); // api를 이용해서 mutation에 데이터를 넘길 수 있다. 
          state.news = response.data 
      })
      .catch(error => {
          console.log(error);
      });
    }
  },

1. vuex 에 action 호출하려면 dispatch api를 이용해서 데이터를 호출해야한다.

2. context.commit api를 이용해서 mutation에 데이터를 넘길 수 있다.

   context.commit('SET_NEWS', response.data); SET_NEWS에 response.data를 넘겨주겠다.

   

​ Actions 에서 commit을 해서 Mutations에 넘길 수 있다.

3. Mutations에서 state에 값을 받아와서 데이터를 넘겨줌

   SET_NEWS(state, news) {
        state.news = news;
   }

4. store를 사용하는 .vue

   this.$store.dispatch('FETCH_NEWS')

   로 불러와서

   <div v-for="item in news">{{ this.$store.state.news }}</div>

   로 받아서 쓴다.

   ​ vuex

   View actions <<<<< API

   View mutations API

   View <<<< state API

이런느낌?

mapstate

모듈화 , 간단하게 바인딩하는것

import { mapState } from 'vuex';
...mapState({
    ask: state => state.ask
})

getters

더 간단하게!

computed와 동일한 속성 (store에서 사용 가능하다.)

store/index.js

getters: {
    fetchedAsk(state){
        return state.ask
    }
},

import { mapgetters } from 'vuex';
....
computed: {
    ...mapGetters({
        fetchedAsk : 'fetchedAsk',
    })

    ...mapGetters([]
        'fetchedAsk',
    ]) // 배열로도 가능 
}

---

이전 ver

vuex

vuex 는 vue component를 한군데에서 관리할 수 있다.

store.js 저장소 >

state : vue 인스턴스의 데이터

.vue 에서 store.js 에 있는 데이터를 쓰고 싶다면?

store 중앙통제소 격인 main.js 에서 선언해서 쓸 수 있음

...
import store from './store'
...
export const EventBus = new Vue()

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

해당 vue에 가서

$store.state.~~ 로 쓰면 됨

컴포넌트에서 vuex의 데이터를 접근할때 중복된 코드 반복호출 >> getters

간단한 계산식을 캐싱해주는것 > comupted 의 속성처럼 사용해 주는것 > getters

이런 store getters 도 반복해서 사용하게 됨 > 이런것을 묶어놓은것이 mapGetters

mapGetters

사용 방법

 <template>
  <div>
    <h1>All Users({{ allUsersCount }})</h1>
    <h1>Seoul Users:({{ countOfSecoul }})({{ percentOfSeoul }}%)</h1>
 </template>     

<script>
import { mapGetters } from 'vuex'
   ...
    computed: {
      ..mapGetters(['allUsersCount','countOfSecoul','percentOfSeoul'])
    }
    ...

 </script>

import 로 mapGetters 선언 후

computed로 불러올 값을 넣어준다 그러면 template 안에서 쓸 수 있음

mapState 도 마찬가지로 쓸 수 있음

mutation

보통 컴포넌트내에 > 데이터 전달로 다른 컴포넌트 동작 하는데 이것을 mutation 으로 사용 할 수있음 .

child's child 와 child와 같은기능을 하는 함수여도 각각 컴포넌트에 해당 기능을 넣어줘야 한다.

store에서 state 를 변화시키는 Mutation 이 존재

store.js

  mutations: {
    addUsers: (state,payload)=> {

    }
  },

payload => 인자를 받아서 넘겨줄 값

.vue

import { mapMutations } from 'vuex'
..
 ...mapMutations(['addUsers']),

 signUp(){
 let userObj=......
 ..
 this.addUsers(userObj)
 }

map 사용 x 직접 commit 으로 불러오는 방법

this,$store.commit('addUsers',userObj)