vuex 액세스 값과 맵 함수 사용 설명

Vuex는 Vue만을 위한 것입니다.js 응용 프로그램 개발의 상태 관리 모델입니다.중앙 집중식 스토리지 관리 어플리케이션의 모든 구성 요소의 상태를 사용하고 해당 규칙에 따라 상태가 예측 가능한 방식으로 변경될 수 있습니다.
앞말
vuex의 실행 프로세스
구성 요소는dispatch를 통해action을 호출하고,action은commit를 통해mutation을 터치하고,mutation은state를 수정하고,state를 수정한 후에 영향을 받는dom를 다시 렌더링합니다.
설치 및 도입
1. 설치
npm install vuex -S
2. 도입
새로 만들기:store/index.js.

import vue from 'vue';
import Vuex from 'vuex';

vue.use(Vuex);

export default new Vuex.Store({
 strict:true,// ， state（ ， false）
 state:{
 a:1,
 b:2
 },
 mutations:{
 addA(state,val){
  state.a+=val;
 },
 addB(state,val){
  state.b+=val;
 }
 },
 actions:{
 addA({commit},val){
  // mutations addA()
  commit('addA', val);
 },
 addB({commit},val){
  // mutations addB()
  commit('addB', val);
 }
 },
 // computed
 getters:{
 getA(state){
  return state.a;
 },
 getB(state){
  return state.b;
 },
 count(state){
  return state.a + state.b;
 }
 },
 modules:{

 }
});

3. 마운트

import store from './store';

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

활용단어참조
매핑 관계
mapState > computed
mapGetters > computed
mapMutations > methods
mapActions > methods
State 및 mapState
state는 vuex의 핵심으로 데이터를 통일적으로 저장하는 곳이다.
store에서 값을 가져옵니다.(권장하지 않음)

<template>
 <div>
  a:{{$store.state.a}}
  <br>
  b:{{$store.state.b}}
 </div>
</template>

공식적으로는computed를 통해 얻는 것을 추천하지만, 여러 개의 값을 얻으려면 매우 번거롭다.
mapState

<template>
 <div>
  a:{{a}}
  <br>
  b:{{b}}
 </div>
</template>

<script>
 import {mapState} from 'vuex';
 export default {
  name: "MapState",
  computed:{
   // store.state computed
   ...mapState(['a','b'])
  }
 }
</script>

getters 및 mapGetters
getters의 값을 가져옵니다.

<div>
 a:{{$store.getters.getA}}
 <br>
 b:{{$store.getters.getB}}
 <br>
 a+b={{$store.getters.count}}
</div>

mapGetters 매핑을 사용합니다.

<template>
 <div>
  a={{getA}}
  <br>
  b={{getB}}
  <br>
  a+b={{count}}
 </div>
</template>

<script>
 import {mapGetters} from 'vuex';
 export default {
  name: "MapGetters",
  computed:{
   // store.getters computed
   ...mapGetters(['getA','getB','count'])
  }
 }
</script>

mutations 및 mapMutations
$store를 통해.commit에서 뮤테이션을 터치합니다.
mutation을 직접 호출하여 수정하는 것을 추천하지 않습니다.

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.commit('add',5)">a+5</button>
 </div>
</template>

mapMutations 매핑을 사용합니다.

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="addA(5)">a+5</button>
 </div>
</template>

<script>
 import {mapMutations} from 'vuex';
 export default {
  name: "MapMutations",
  methods:{
   // store.mutations methods
   ...mapMutations(['addA'])
  }
 }
</script>

actions 및 mapActions
공식적으로는 액션을 통해mutation을 촉발하는 것을 추천합니다. 비록 비교적 번거롭지만.
action은 비동기화를 지원합니다.mutation은 동기화만 가능합니다.
$store를 통해.dispatch에서 액션을 터치합니다.
a+5
mapActions 매핑을 사용합니다.

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.dispatch('addA',5)">a+5</button>
 </div>
</template>

<script>
 import {mapActions} from 'vuex';
 export default {
  name: "MapActions",
  methods:{
   // store.actions methods
   ...mapMutations(['addA'])
  }
 }
</script>

Modules
시스템이 비교적 방대할 때store는 매우 비대해진다.
Vuex는 store의 모듈화 관리를 편리하게 하기 위해 store를 모듈로 분할할 수 있도록 합니다.
모든 모듈은 자신의state,mutation,action,getter, 심지어 플러그인 모듈을 가지고 있다.
보충 지식: vuex에 데이터를 저장하고 가져오기 - 및 actions를 직접 호출합니다.js의 비동기 방법
vuex 변수에 데이터 저장
1. state에서.js에 userInfo: {},
2.actions.js에 동기화 사용자 정보 추가 - USER_에 매개변수userInfo 전달INFO
방법 만들기 - 비동기식 방법 사용하지 않기

syncUserInfo({commit}, userInfo){
  commit(USER_INFO, {userInfo});
},

3. 중간 변수 mutation-type을 만듭니다.js
export const USER_INFO = 'user_info';
4. 액션 중.js에 변수 도입 - USER_INFO

 import {
  USER_INFO
 } from './mutation-types'

5. 돌연변이에서.js에 변수 도입

 import {
  USER_INFO
 } from './mutation-types'

userInfo를 state에 할당

[USER_INFO](state, {userInfo}) {
 state.userInfo = userInfo;
 },

6. 외부에서 직접 액션을 호출한다.js의 방법 syncUserInfo

 import {mapActions} from 'vuex'
 methods: {
  //  vuex- 。 ... 
  ...mapActions(['syncUserInfo']),
 }

vuex에서 데이터 가져오기
1. import {mapState} from'vuex'를 도입한다.
2. 속성 계산

computed:{
 ...mapState(['userInfo'])
},

vuex-중 액션을 직접 호출합니다.js의 비동기식 방법 -
this.$store.dispatch

created(){
  //  vuex-actions - app， 
  this.$store.dispatch('getUserInfo')
},

actions.js

// 7.  
async getUserInfo({commit}){
 const result = await getUserInfo(); // actions getUserInfo --- import
 console.log(result);
 if(result.success_code === 200){
   commit(USER_INFO, {userInfo: result.message});
 }
},

actions에서 getUserInfo 메서드 호출 --- 도입 필요

import {
 getUserInfo,
} from '../api'
----------------------
api-index.js
// 2.9  
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');

상기 vuex 액세스 값과 맵 함수 사용 설명은 바로 여러분이 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.