초보 학생 에 게 보 내 는 vuex 는 손가락 북 소결 을 빠르게 올 렸 다.

본 고 는 초보 학생 들 에 게 보 내 는 vuex 의 빠 른 손가락 북 소결 을 소개 하 였 으 며,구체 적 으로 다음 과 같다.
끌어들이다

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...}
})

export default store

 
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
  store,...
})
...

//test.vue    ：
import {mapState,mapMutations} from 'vuex'

스테이 트 편
state 업데이트 실시 간 렌 더 링 은=coptute d==이 계산 속성 을 기반 으로 합 니 다.data 에 직접 부여 하면 초기 값 만 부여 할 수 있 고 state 에 따라 실시 간 렌 더 링 을 바 꾸 지 않 습 니 다.

<!--state        -->
export default {
  data() {
   return {
   name:this.$store.state.name,
   };
  },
}

<!--  state        -->
<template>
  <div>
    {{name}}
  </div>
<template>
export default {
  computed: {
   name() {
   return this.$store.state.name;
   }
  },
}

메모:data 의 변 수 는 coptute d 의 변수 와 이름 을 바 꾸 면 data 우선,이름 을 주의 하 십시오.
여러 state 값 을 가 져 오고 여러 함수 return 을 쓰 는 것 은 번 거 로 우 므 로=mapState==보조 함수 가 있 습 니 다.

<!--      ,  -->
export default {
  computed: {
   token(){
   return this.$store.state.token;
   }，
   name(){
   return this.$store.state.name;
   }
  },
}

<!--mapState     -->
import { mapState } from 'vuex'
export default {
  computed: mapState([
   'token'，
   'name'
  ])
}

우 리 는 부분 적 인 계산 이 있 는데,어떻게 mapState 와 함께 사용 합 니까?

import { mapState } from 'vuex'
export default {
  computed:{
    getTime(){
      return 123;
    },
    ...mapState([
     'token'，
     'name'
    ])
  }
}

저희 가 별명 을 지어 드릴 게 요.

<template>
  <div>
    xiaokeai,dahuilang       
    token,name state  
    {{xiaokeai}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
      })
    }
  }
</script>

state 와 data 에 무슨 일이 일어나 야 합 니까?

<template>
  <div>
      token  123;
    balabala     123   
    {{balabala}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"    "
      }
    }
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
        //        `this`       ，            
        balabala(state){
          return state.token + this.pikaqiu;
        }
      })
    }
  }
</script>

대상 치 를 어떻게 깨 뜨 립 니까?

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"    "
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,
  xiaoSon:state=>state.obj.yeye.baba.xiaoSon,
 })
    }
  }
</script>

이런 방식 으로 대상 을 업무 에 쓰 면 직관 적 이지 도 않 고 공용 하지 도 않 는 다.다음 절=Getter==더 좋 은 방안 이 있다.
Getter 편
Getter 는 state 의[대상]값 을 미리 처리 하여 사용 할 때 직접 추출 할 수 있 도록 합 니 다.
this.$store.getters.xxx 에서 도 사용 할 수 있 고,mapGetters 보조 함수 도 사용 할 수 있 습 니 다.=보조 함수 주의:=state 와 마찬가지 로 coptute d 에 주입 할 수 있 습 니 다.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "  ",
   xiaoSon: "  "
  }
  }
 }
 },
 getters: {
    <!--                -->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})

export default store

<!--    , state  ，         -->
<template>
 <div>
    {{getson}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

뮤 테 이 션 편
작업:this.$store.commt("이름","값");

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex token",
 },
 mutations: {
 setToken(state, val) {
  state.token = val;
 }
 }
})

export default store

mapMutations 보조 함수,state 와 마찬가지 로 별명 을 지정 할 수 있 습 니 다.==주의:=보조 함수 가 methods 에 주 입 됩 니 다.

 methods: {
  ...mapMutations([
   'setToken'
  ])
 }
 
 <!--  -->
 this.setToken(100); //token   100

Mutation 은 동기 함수 여야 합 니 다.이 말 을 오해 하지 마 세 요.비동기 가 사용 할 수 없다 고 생각 하지 마 세 요.비동기 가 안에 사용 할 수 있 습 니 다.보기 의 렌 더 링,수치 추출 에 문제 가 없습니다.문 제 는 디 버 깅 할 때 일부 브 라 우 저 디 버 깅 플러그 인 이 state 를 정확하게 감청 하지 못 한 다 는 것 입 니 다.그래서 디 버 깅 을 편리 하 게 하고,가능 한 한 이 보 를 action 에 기록 합 니 다.
액 션 편
action 의 인 자 는 state 가 아니 라 context 입 니 다.context 에는 commt,state 가 포함 되 어 있 습 니 다.기본 동작:this.$store.dispatch("함수 명","값")

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 },
 actions: {
  increment (context) {
   context.commit('increment')
  }
 }
})

<!--          methods -->
import { mapActions } from 'vuex'

export default {
 methods: {
  ...mapActions([
    "increment"
  ])
 }
}

<!--  -->
this.increment(123);

모듈 편
module 목적 은 store 를 기능 에 따라 여러 파일 로 나 누 어 유지 관리 에 유리 합 니 다.module 는 2 가지 상황 으로 나 누 었 습 니 다.1.네 임 스페이스 가 있 습 니 다.2.네 임 스페이스 가 없습니다.
네 임 스페이스 가 없습니다:action,mutation,getter 는 전역 에 등록 되 어 있 으 므 로 방법 함수 가 같은 이름 을 설정 하지 마 십시오.같은 이름 이면 모두 실 행 됩 니 다.
stete 예 외 는 부분 입 니 다.

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex token",
 },
 modules:{
 moduleA
 }
})

export default store;

<!--moduleA.js-->
export default {
 // namespaced: true,
 state: {
  cat:"  cat",
 },
 mutations: { 
 setCat(state, val) {
  state.cat = val;
 } 
 },
 actions: { 
   
 },
 getters: { 
   
 }
};

이름 없 는 공간 값 추출

this.$store.state.moduleA.cat
  
...mapState({
 cat:state=>state.moduleA.cat,
}),

   (state   ，      )：
...mapState([
  "cat"
]),

이름 없 는 공간 변경 값

     ，           
this.$store.commit("setCat",666);
  
...mapMutations([
 "setCat"
])

네 임 스페이스 가 있 습 니 다:state,action,mutation 과 getter 는 부분 적 이 고 모듈 간 의 이름 이 서로 충돌 하지 않 으 며 이름 을 바 꿀 수 있 습 니 다.
namespaced 를 true 로 설정 하면 오픈 가능

<!--moduleA.js   -->
export default {
 namespaced: true,
 state: {
  cat:"  cat",
 }
}

네 임 스페이스 값

this.$store.state.moduleA.cat

  
<!--    ：         ， modules      key -->
<!--     ，       ，           -->
...mapState("moduleA",[
  "cat"
])

네 임 스페이스 변경 값

<!--           ，      -->
...mapMutations("moduleA",[
 "setCat"
])
this.setCat(888);

  ：

this.$store.commit("moduleA/setCat",666);

마지막 플러그 인
vuex 페이지 새로 고침 은 데 이 터 를 잃 어 버 립 니 다.vuex-persistedstate 플러그 인 으로 해결 할 수 있 습 니 다.

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 state: {},
 mutations: {},
 actions: {},
 getters: {},
 modules:{},
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

export default store

초보 학생 들 에 게 보 내 는 vuex 의 빠 른 손가락 북 소결 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 vuex 의 빠 른 시작 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!