vuex state와 mapState를 사용하는 방법

이번에는 vuex state와 mapstate를 어떻게 사용하는지, 그리고 vuex state와 mapstate를 사용할 때 Notes는 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

먼저 vue cli를 사용하여 자신만의 vue 프로젝트를 구축하세요

1.npm i -g vue-cli
2.vue init webpack Sell(sell은 프로젝트 이름입니다)
3 끝까지 입력하세요. vue-router, es6 구문 검사 등과 같은 일부 종속 패키지를 설치할지 묻는 메시지가 표시됩니다. 개인 습관이나 취미에 따라 Y/N을 선택하세요.)
4.npm i (이것은 설치 프로젝트의 종속 패키지입니다. )
5. npm run dev (vue 프로젝트 시작) 이때 페이지에 vue 로고가 보이면 vue 프로젝트의 기본 구성이 완료되었음을 의미하며, 쓸모 없는 구성 요소를 삭제할 수 있습니다
6. Webpack Sell은 기본적으로 vuex를 설치하지 않으므로 vuex를 설치해야 합니다. 서버를 종료하려면 명령줄에서 ctrl+c를 두 번 누르고, vuex를 설치하려면 npm install vuex –save를 설치해야 합니다.
7. src 디렉터리 이름을 helloVuex로 지정하겠습니다(이 이름은 원하는 대로 할 수 있으며 행복합니다). 이 구성 요소는 주로 기본 컨테이너로 사용되며 콘텐츠만 표시합니다
8. 그런 다음 원하는 이름으로 새 구성 요소를 만듭니다. 여기서는 display 구성 요소라고 부릅니다.) 상태를 수락하려면
9 다음으로 src 디렉터리에 store라는 새 폴더를 만들고 test.js라는 저장소 아래에 js 파일을 만듭니다(여기서 저장소는 우리의 저장소입니다). 상태 관리를 위해 vuex를 사용하세요. Store는 vuex의 핵심이므로 이름을 지정하고 src 디렉터리에 새 저장소 파일을 만들고, store 디렉터리에 새 test.js 파일을 만듭니다(아래 참조). ). vuex를 사용하기 전에 vue에게 이를 사용하도록 지시해야 한다는 것을 알 수 있습니다. Vue.use(Vuex) 여기서는 관리할 변수 개수가 하나만 있으므로 저장소 객체를 생성할 때 매개변수를 constructor에 전달하고 state 아래에는 카운트가 하나만 있고 0으로 초기화됩니다.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store

이제 모든 상태, 즉 변수가 test.js에 배치되는데, 우리 컴포넌트가 상태 수정 값을 어떻게 얻을 수 있을까요? 여기서 작동하는 데는 두 단계가 있습니다

　　1. Vue는 저장소 개체를 루트 인스턴스에 주입하는 주입 메커니즘을 제공합니다. vue의 루트 인스턴스는 새로운 Vue 생성자이며, 모든 하위 구성 요소에서 this.$store는 store 객체를 가리킵니다. test.js에서는 store를 내보내고 store가 노출되었으므로 new Vue()가 main.js에 있으므로 main.js에 직접 store를 도입하고 주입할 수 있습니다.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

2. 하위 구성 요소에서는 계산된 속성을 사용합니다. 계산된 속성은 종속성에 따라 자동으로 업데이트됩니다. 따라서 상점의 상태가 변경되는 한 자동으로 변경됩니다. display.vue에서 다음과 같이 변경합니다. 하위 구성 요소의 This.$store는 저장소 개체를 가리킵니다. test.js의 개수를 8로 변경하면 페이지에서는 8이 됩니다.

<template>
 <p>
  <h3>Count is {{count}}</h3>
 </p>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }
</script>

3. 상태 값은 계산된 속성을 통해 얻을 수 있지만 구성요소의 각 속성(예: 개수)은 함수입니다. 10개가 있으면 10개의 함수를 작성하고 이를 10번 반복해야 합니다. .$store.state, 별로 편리하지 않습니다. Vue는 상태를 구성 요소에 직접 매핑하는 mapState 함수를 제공합니다.

물론 mapState를 사용하기 전에 먼저 도입해야 합니다. 객체나 배열을 받아들이는 두 가지 방법으로 사용될 수 있습니다. 여전히 display.vue 구성 요소 아래에 있습니다.

　객체 사용법은 다음과 같습니다.

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
　　　　　　// 下面这两种写法都可以
  computed: mapState({
   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
   count: 'count'　　　　　　　　　// 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
  })
 }
</script>

배열 방법은 다음과 같습니다.

<script>
 import {mapState} from "vuex";
 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

4, 마지막 질문이 하나 있습니다. 구성 요소 내부에도 계산된 속성이 있으면 어떻게 될까요? mapState에 속하지 않습니다. 그런 다음 객체 분할을 사용하여 mapState 함수에 의해 생성된 객체를 하나씩 나눕니다. 처음과 마찬가지로 계산된 속성을 하나씩 나열합니다. 10개의 속성이 있으면 10개의 함수를 작성합니다.

... es6에서는 분할에 사용되지만 배열 분할만 가능합니다. ECMAScript stage-3에서는 객체를 분할할 수 있으므로 이때는 babel-stage-3도 사용됩니다. 설치가 완료된 후 npm install babel-preset-stage-3 --save-dev를 추가하는 것을 잊지 마세요. babelrc의 babel 구성 파일 에서 stage-3,

을 작성하지 않으면 항상 오류가 보고됩니다. 구성 요소의 계산 친숙성을 표시하려면 페이지에 p 태그를 추가하세요.

babelrc

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
  "presets": ["env", "stage-3"],
  "plugins": ["istanbul"]
 }
 }
}

display.vue 구성 요소가 변경된 후

<template>
 <p>
  <h3>Count is {{count}}</h3>
  <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </p>
</template>
<script>
 import {mapState} from "vuex";
 export default {
  computed: {
   localComputed () {
    return this.count + 10;
   },
   ...mapState({
    count: "count"
   })
  } 
 }
</script>

test.js의 state.count를 10으로 변경하여 효과를 확인하세요

Vuex

에서 mapState의 사용법을 살펴보겠습니다.

今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用户信息
 orderList: [{ orderno: '1111' }], //订单列表
 orderDetail: null, //订单产品详情
 login: false, //是否登录
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})
computed: {
   ...mapState([
    'orderList',
    'login'
   ]),
  }, 
  mounted(){ 
   console.log(typeof orderList); ==>undefind
   console.log(typeof this.orderList)==>object
  }

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要，这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用Vue实现倒计时按钮

怎样利用Vue写一个双向数据绑定

위 내용은 vuex state와 mapState를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!