중앙 집중식 상태 관리와 함께 Vuex를 어떻게 사용하나요? 다음 기사에서는 vuex를 이해하고 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 });
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!