중앙 집중식 상태 관리 Vuex 사용에 대한 간략한 분석

중앙 집중식 상태 관리와 함께 Vuex를 어떻게 사용하나요? 다음 기사에서는 vuex를 이해하고 vuex 사용 방법에 대해 간략하게 설명하겠습니다. 도움이 되기를 바랍니다.

1. vuex란?

Vue 애플리케이션에서 여러 구성 요소의 공유 상태를 중앙에서 관리할 수 있는 Vue의 중앙 집중식 상태 관리를 구체적으로 구현하는 Vue 플러그인입니다. 또한 구성 요소 간 통신 방법이며 모든 구성 요소 간 통신에 적합합니다

2. Vuex를 사용하는 경우

1. 여러 구성 요소가 동일한 상태에 의존합니다

2. 의 구성 요소 중 동일한 상태를 변경해야 합니다

2.1 Vuex 사용 방법

우선 Vuex를 사용하는 경우 두 개 이상의 구성 요소를 공유해야 할 확률이 높다는 점을 알아야 합니다. 데이터/상태 집합이므로 먼저 두 개의 구성 요소(각각 Count, Person)를 준비해야 하며 Vuex는 일련의 준비 작업을 수행하기 위해 저장소에 의존하기 때문에 src 디렉터리에 저장소 파일을 추가해야 합니다

2.2 Count 컴포넌트

이 컴포넌트에서는 map... 다양한 것들을 볼 수 있습니다. 여기서는 vuex의 4가지 map에 대해 이야기해야 합니다. 여기서는 이 구성요소의 기능만 소개하겠습니다. Count는 "강력한" 컴퓨팅 기능을 갖춘 A 구성요소로, 최종 숫자를 10배로 증폭할 수 있고, 홀수 연산을 수행할 수 있으며, 연산을 지연시킬 수 있다고 할 수 있습니다. 극도로 "강력하다"

<template>
  <div>
    <h3>当前和为：{{sum}}</h3>
    <h3>当前和为：放大10倍：{{bigSum}}</h3>
    <h3>我在{{school}},学习{{subject}}</h3>
    <h3>下方组件的总人数{{personList.length}}</h3>

    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">＋</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">奇数＋</button>
    <button @click="incrementWait(num)">500ms后再＋</button>
  </div>
</template>
<script>
// 引入mapState等
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      num: 1 // 用户选择的数字
    };
  },
  computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate()的意思是将其内的对象全部展开的计算属性里面)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
    ...mapState(["sum", "school", "subject", "personList"]), // 数组写法
    // 使用mapGetters生成计算属性，从getters种读取数据
    // ...mapGetters(["bigSum"]), // 数组写法
    ...mapGetters({ bigSum: "bigSum" }) // 数组写法
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //数组式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式简写
  },
  mounted() {
  }
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

2.3Person 컴포넌트

Person 컴포넌트에는 사람을 추가하는 "강력한" 기능이 있으며, 자신의 희망에 따라 친척과 친구를 추가할 수 있습니다

<template>
  <div>
    <h3>人员列表</h3>
    <h3>Count组件的求和为{{sum}}</h3>
    <input type="text" placehodler="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum() {
      return this.$store.state.sum;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    }
  }
};
</script>

2.4 컴포넌트 소개

이 두 구성 요소를 각각 앱에 도입하세요

<template>
  <div class="container">
    <Count></Count>
    <Person/>
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person }
};
</script>

2.5 폴더 아래에 store index.js 구성

store 폴더 아래에 새 index.js 파일을 만들고 다음을 작성하세요. 먼저 vue 및 vuex를 도입한 다음 action을 사용하여 해당 작업에 응답합니다. 여기서는 각각 전달된 컨텍스트와 값을 나타내는 두 개의 매개변수 context 및 value를 받을 수 있습니다. 컨텍스트에서 구성한 상태에서 모든 것을 찾을 수 있으며, 여기서 value의 값은 1

// 创建VUex种的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于组件内的动作响应
const actions = {
    // 奇数加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延迟加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 准备mutations——用于数据操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations种的ADD_PERSON被调用',state.personList);
        state.personList.unshift(value)
    }
}
// 准备state——用于数据的储存
const state = {
    sum: 0, // 当前和
    school: '山鱼小学',
    subject: '前端',
    personList:[{id:'001',name:'张三'}]
}
// 用于加工state种的数据
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名称一样所以可以触发简写模式
    actions,
    mutations,
    state,
    getters
});

2입니다. 1.

mapState: 계산을 위해 상태의 데이터를 매핑하는 데 사용됩니다. Attributes

computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate({})的意思是将其内的对象全部展开的计算属性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
        
    // ...mapState(["sum", "school", "subject"]), // 数组写法
  }

2.

mapGetters: getter의 데이터를 계산된 속성에 매핑하는 데 사용됩니다.

computed: {
    // 使用mapGetters生成计算属性，从getters种读取数据
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

3.

mapMutations: 생성 및 돌연변이를 돕는 데 사용됩니다. $store.commit()

methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    // ...mapMutations(["JIA", "JIAN"]), // 数组式(button的名字和vuex里面的名字必须统一)
  },

3.

mapActions 함수를 포함한 통신 방법: 사용됨 $store.commit()

  methods: {
     // 借助mapActions生成对应的方法，方法种会调用相应的dispath去联系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //对象式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式
  },

함수를 포함하여 변형과 통신하는 메서드를 생성하는 데 도움이 됩니다. 참고: mapActions 및 mapMutations를 사용할 때 매개변수를 전달해야 하는 경우 템플릿이 아니면 매개변수는 이벤트 객체입니다.

(학습 영상 공유: vuejs 입문 튜토리얼,

기본 프로그래밍 영상

)

위 내용은 중앙 집중식 상태 관리 Vuex 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!