vuex state+mapState 실무 프로젝트 분석-JS 튜토리얼-php.cn

이번에는 vuex state+mapState의 실제 프로젝트에 대한 분석을 가져오겠습니다. vuex state+mapState의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

먼저 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. 그런 다음 원하는 이름으로 새 구성 요소를 만듭니다. 여기서는 디스플레이 구성요소라고 부릅니다) 상태를 수락합니다
9. 다음으로 src 디렉터리에 store라는 새 폴더를 만들고 test.js라는 저장소 아래에 js 파일을 만듭니다(여기서 저장소는 우리의 전면입니다. end data Warehouse) 상태 관리를 위해 vuex를 사용합니다. Store는 vuex의 핵심이므로 store라는 이름을 갖습니다. src 디렉토리에 새로운 store 파일을 생성하고, store 디렉토리에 새로운 test.js 파일을 만듭니다. . vuex를 사용하기 전에 vue에게 이를 사용하도록 지시해야 한다는 것을 알 수 있습니다. Vue.use(Vuex) 여기서는 관리할 변수 개수가 하나만 있으므로 저장소 객체를 생성할 때 매개변수를 생성자에 전달하면 됩니다. 상태에서 하나의 카운트를 가지며 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对象上。

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