Vuex 의 상태 관리(온 가족 통)

Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.Vuex 도 Vue 의 공식 디 버 깅 도구 devtools extension 에 통합 되 어 0 설정 의 time-travel 디 버 깅,상태 스냅 샷 가 져 오기 내 보 내기 등 고급 디 버 깅 기능 을 제공 합 니 다.
이상 은 vuex 의 공식 문서 가 vuex 에 대한 소개 이 고 공식 문 서 는 vuex 의 용법 에 대해 상세 하 게 설명 했다.여기 서 vuex 의 각 용법 을 자세히 설명 하지 않 겠 습 니 다.이 블 로 그 를 쓰 는 목적 은 일부 학생 들 이 vuex 를 더욱 빨리 이해 하고 시작 하도록 돕 는 것 입 니 다.
1.설치

$ npm install vuex --save

2.main.js 메 인 입구 js 에서 store.js 참조

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './vuex/store'  //  store.js
Vue.config.productionTip = false //             

//vue  
new Vue({
 el: '#app',
 router,
 store,              // store   vue     
 template: '<App/>',
 components: { App }
})

3.store.js 에서 Vuex 참조

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //  Vuex

//              ，        
const state = {
  count: 1
}

// mutations    store  ,        ，        
const mutations = {
  //         this.$store.commit('jia')    
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//     ，        
export default new Vuex.Store({
  state,
  mutations
})

4.vue 구성 요소 에서 사용
$store.commt('jia')구역 을 사용 하여 mutations 아래 의 가감 방법 을 촉발 합 니 다.

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{$store.state.count}}</h5>
   <p>
    <button @click="$store.commit('jia')">+</button>
    <button @click="$store.commit('jian')">-</button>
   </p>
 </div>
</template>

<!--   scoped css          ，          -->
<style scoped>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

5.프레젠테이션 보기

6.state 접근 상태 대상
컴퓨터 로 계산 하기

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="$store.commit('jia')">+</button>
    <button @click="$store.commit('jian')">-</button>
   </p>
 </div>
</template>

<script>
import {mapState} from 'vuex'
export default{
  name:'hello', //  name    ，        ，             ，   
  //    
  // computed: {
  //  count(){
  //   return this.$store.state.count + 6
  //  }
  // }
  
  //            mapState
  computed:mapState({
   count:state => state.count + 10
  })
 
  // ECMA5  
  // computed:mapState({
  //  count:function(state){
  //   return state.count
  //  }
  // })
  
  //   
  // computed: mapState([
  //  'count'
  // ])
 }
</script>

7.mutations 트리거 상태(동기 화 상태)

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
   </p>
 </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
 export default{
  name:'hello', //  name    ，        ，             ，   
  //   
  computed: mapState([
   'count'
  ]),
  methods:{
   ...mapMutations([
     'jia',
     'jian'
   ])
  }
 }
</script>

8.getters 계산 속성
getter 는 화살표 함 수 를 사용 할 수 없습니다.this 의 방향 을 바 꿀 것 입 니 다.
store.js 에 getters 추가

//   
const getters = {
  count(state){
    return state.count + 66
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters
})
//count          state  
//getters                       ,    count  ，       count，    。
     

<script>
 import {mapState,mapMutations,mapGetters} from 'vuex'
 export default{
  name:'hello',
  computed: {
   ...mapState([
    'count'
   ]),
   ...mapGetters([
    'count'
   ])
  },
  methods:{
   ...mapMutations([
     'jia',
     'jian'
   ])
  }
 }
</script>

9.actions(비동기 상태)
store.js 에 actions 추가

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//     
const state = {
  count: 1
}

// mutations    store       
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//     
const getters = {
  count(state){
    return state.count + 66
  }
}
//     
const actions = {
  jiaplus(context){
    context.commit('jia') //  mutations     
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('      ，       jian   ')
  },
  jianplus(context){
    context.commit('jian')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

구성 요소 에서 사용

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
   </p>
   <p>
    <button @click="jiaplus">+plus</button>
    <button @click="jianplus">-plus</button>
   </p>
 </div>
</template>
<script>
 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
 export default{
  name:'hello',
  computed: {
   ...mapState([
    'count'
   ]),
   ...mapGetters([
    'count'
   ])
  },
  methods:{
   //             
   ...mapMutations([
     'jia',
     'jian'
   ]),
   //                 
   ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus'
   })
  }
 }
</script>

<style scoped>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

10.모듈 모듈
매우 큰 프로젝트 에 적용 되 고 상태 가 많은 경우 에 사용 하여 관리 하기에 편리 하 다.
store.js 수정

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 1
}
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
const getters = {
  count(state){
    return state.count + 66
  }
}
const actions = {
  jiaplus(context){
    context.commit('jia') //  mutations     
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('      ，       jian   ')
  },
  jianplus(context){
    context.commit('jian')
  }
}

//module         moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}

//   B moduleB
const moduleB = {
  state: {
    count:108
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.