Vuex의 모듈식 구성에 대한 자세한 설명

이 글은 주로 Vuex의 고급 모듈화 구성에 대한 자세한 설명을 소개하고 있으며, 참고용으로 공유해 드립니다.

자체 제작한 vuex LOGO

처음 두 글에서는 Vuex의 기본적인 사용법을 설명했지만, 실제 프로젝트에서 이렇게 작성하는 것은 절대 무리입니다. 컴포넌트가 너무 많으면 데이터를 넣는 것이 불가능합니다. A store.js의 모든 구성요소를 구성하므로 Vuex를 모듈식으로 구성해야 합니다. 먼저 프로젝트 구조를 살펴보세요.

프로젝트 구조

1. 먼저 다음 명령을 실행합니다.

vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev

2. 위 구조에 따라 파일 디렉터리를 생성합니다.

Vuex 모듈 디렉터리

3 . file

이전 두 기사의 예제를 계속 사용할 것입니다. 먼저 각 파일의 역할에 대해 이야기해보겠습니다. 이전 예의 store.js와 유사)

getters.js는 속성을 얻는 데 사용되는 원래 getter로 작성됩니다.

actions.js는 프로세스 판단과 같이 실행될 작업인 원래 작업으로 작성됩니다. 그리고 비동기식 요청

index.js를 사용하여 actions.js, getters.js, user.js를 조합한 다음 균일하게 내보냅니다

1 main.js에서 index.js 파일을 가져와서 등록합니다

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

2.types.js에서 상수 정의 및 내보내기. 기본적으로 모두 대문자로 표시됩니다

// 定义类型常量，默认全部大写
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
export default {
  INCREMENT,
  DECREMENT
}

참고: 이러한 상수를 별도의 파일에 넣으면 코드 공동 작업자가 전체 앱에 포함된 변형을 볼 수 있습니다. 섬광. 상수를 사용할지 여부는 사용자에게 달려 있습니다. 이는 여러 사람이 함께 작업하는 대규모 프로젝트에 도움이 될 수 있습니다. 하지만 마음에 들지 않으면 하지 않아도 됩니다.

3. user.js

// 导入 types.js 文件
import types from "./../types";
const state ={
  count:5
}
// 定义 getters
var getters ={
  count(state){
    return state.count
  }
}
const actions ={
  increment({ commit, state }){
    // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应，与原来 commit('increment') 的原理相同，只是把类型名换成了常量
    commit(types.INCREMENT)
  },
  decrement({commit,state}){
    if (state.count>10) {
      // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
      commit(types.DECREMENT)
    }
  }
}
const mutations ={
  // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
  [types.INCREMENT](state){
    state.count++
  },
  // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
  [types.DECREMENT](state){
    state.count--
  }
}
// 最后统一导出
export default {
  state,
  getters,
  actions,
  mutations
}

에 사용자 구성 요소에 사용된 상태, getter, 작업 및 변형을 작성합니다. 참고: 위 변형의 [types.INCREMENT]는 type.INCREMENT가 객체이기 때문에 작성되었습니다. 함수 이름으로 직접 작성해야 합니다. 상수를 함수 이름으로 사용하려면 원래 작성 방법은 다음과 같습니다.

const mutations ={
  increment(state){
    state.count ++;
  }
}

4. getters.js 홀수와 짝수를 결정하는 방법

// 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/user'
const getters = {
  isEvenOrOdd(state){
    // 注意数据是从 user.js 中获取的，所以写成 user.state.count
    return user.state.count % 2 == 0 ? "偶数" : "奇数"
  }
}
// 并导出
export default getters;

5. actions.js

// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types'
const actions= {
  incrementAsync({ commit, state }) {
    // 异步操作
    var p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000);
    });
    p.then(() => {
      commit(types.INCREMENT);
    }).catch(() => {
      console.log('异步操作');
    })
  }
}
// 最后导出
export default actions;

6에 원래 비동기 작업을 작성합니다. , 그런 다음 함께 내보냅니다

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 导出 store 对象
export default new Vuex.Store({
  getters,
  actions,
  modules:{
    users
  }
})

참고: 스토어 개체를 내보낼 때 vuex의 핵심 개념에서 getter와 작업에 기본값이 있으므로 직접 작성할 수 있습니다. 하지만 사용자는 기본이 아니므로 내보내기에는 vuex의 모듈 개체가 사용됩니다

핵심 개념

7. Vue.app 파일은 어떠한 수정도 하지 않습니다

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">延时增加</button>
  <p>{{count}}</p>
  <p>{{isEvenOrOdd}}</p>
 </p>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
 name: &#39;app&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;
  }
 },
 computed:mapGetters([
  &#39;count&#39;,
  &#39;isEvenOrOdd&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

드디어 스릴 넘치는 시간이 왔습니다. , 시간이 오래 걸렸습니다. 강력한 것이 실행될 수 있습니까?

vuexmodular.gif

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)

WeChat 애플릿의 데이터 저장 및 가치 획득과 관련된 문제

Vue에서 간소화된 스타일을 구현하는 방법(자세한 튜토리얼)

Vue 글로벌 구성 요소를 사용자 정의하는 방법은 무엇입니까?

위 내용은 Vuex의 모듈식 구성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!