Vue3에서 Vuex를 사용하는 방법

Vuex는 무엇을 하나요?

Vue 공식: 상태 관리 도구

상태 관리란 무엇인가요?

여러 구성 요소 간에 공유되어야 하며 반응형, 단일 변경, 모든 변경이 가능한 상태입니다.

예를 들어 전역적으로 사용되는 일부 상태 정보: 사용자 로그인 상태, 사용자 이름, 지리적 위치 정보, 장바구니 항목 등

이 시점에서 전역 상태 관리를 위한 도구가 필요합니다. Vuex는 다음과 같습니다. 도구.

단일 페이지 상태 관리

View–>Actions—>State

뷰 레이어(view)는 액션(action)을 트리거하여 상태(state)를 변경하고 다시 뷰 레이어(view)에 응답합니다

vuex (Vue3.2 버전)

store/index.js는 스토어 객체를 생성하고 스토어를 내보냅니다.

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js는

...
import store from './store'
...
app.use(store)

다중 페이지 상태 관리

vuex 스토어 객체 속성 소개

메소드를 소개하고 사용합니다. Vue3에서 스토어 인스턴스 객체 가져오기

vue2에서는 this.$store.xxx를 통해 스토어의 인스턴스 객체를 가져올 수 있습니다.

vue3의 설정은 beforecreate 및 생성 전에 실행됩니다. 이때 vue 객체는 아직 생성되지 않았고 이전 this도 없으므로 여기서는 store 객체를 얻기 위해 다른 방법을 사용해야 합니다.

import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store)  // store 实例对象

1. state

데이터를 저장하는 곳

state: {
  count: 100,
  num: 10
},

사용 방법은 vue2.x 버전과 거의 동일합니다. $store.state.property 이름을 통해 해당 state의 속성을 가져옵니다.

//template中
<span>{{$store.state.count}}</span>
<span>{{$store.state.num}}</span>

상태에서 데이터 변경을 직접 수행할 수 있지만 Vue에서는 이를 권장하지 않습니다. Vue 개발 도구 devtools의 경우 상태에서 직접 데이터 변경이 이루어지면 devtools가 이를 추적할 수 없습니다. vuex에서는 데이터 변경이 액션(비동기 작업)이나 변이(동기 작업)를 통해 수행될 수 있어 데이터 변경 사항을 devtools에서 직접 관찰하고 기록할 수 있어 개발자가 보다 쉽게 ​​디버깅할 수 있기를 기대합니다.

또한 vue3의 상태에서 속성을 추가하거나 객체를 삭제할 때 더 이상 객체의 반응형 처리를 수행하기 위해 vue.set() 또는 vue.delete()를 사용할 필요가 없습니다. 이미 반응형입니다.

2. mutations의 저장소 상태를 업데이트하는 유일한 방법

vuex: mutations 제출

동기화 작업은 mutations에서 직접 수행할 수 있습니다.

mutation은 주로 2가지 부분으로 구성됩니다.

1. String 이벤트 유형(유형)

2. A **콜백 함수(핸들러)** 콜백 함수의 첫 번째 매개변수는 state

mutations: {
  // 传入 state
  increment (state) {
    state.count++
  }
}

입니다. 템플릿의 $store.commit('메서드 이름')에 의해 트리거됩니다.

vue3.x에서 필수입니다. ** store 인스턴스에서는 useStore **와 같은 함수를 호출하고

// 导入 useStore 函数
import { useStore } from 'vuex'
const store = useStore()
store.commit('increment')

mution의 매개변수 및 매개변수 전송 메소드를 vuex로 가져와야 합니다. 수신된 매개변수는 정의된 메소드에 직접 작성하여 승인할 수 있습니다.

// ...state定义count
mutations: {
  sum (state, num) {
    state.count += num
  }
}

는 commit의 페이로드를 통해 전달됩니다

store.commit('변이의 함수 이름', '전달해야 하는 매개변수')를 사용하여 commit

<h3 id="this-store-state-count">{{this.$store.state.count}}</h3>
<button @click="add(10)">++</button>
...
<script setup>
// 获取store实例，获取方式看上边获取store实例方法
const add = (num) => {
  store.commit(&#39;sum&#39;, num)
}
</script>

mution의 제출 스타일

에 매개변수를 추가하여 전달합니다. 앞에서 언급한 것처럼 Mutation은 주로 유형과 콜백 함수, 그리고 커밋 페이로드를 통한 매개변수 전송(제출)으로 구성됩니다. 이제

이 방법으로 mutation을 제출할 수 있습니다

const add = (num) => {
  store.commit({
    type: 'sum',  // 类型就是mution中定义的方法名称
    num
  })
}

...
mutations: {
  sum (state, payload) {
    state.count += payload.num
  }
}

3. 작업은 비동기식으로 수행됩니다. action을 받아서 mutation

action으로 전달되는 방식은 기본적으로 다음과 같이 사용된다. Action에 정의된 메소드의 기본 매개변수는 **context context**인데, 이는 context context 객체를 통해 store 객체

로 이해될 수 있다. 저장소를 가져오고 커밋을 통해 변형의 메서드를 트리거하여 비동기 작업을 완료합니다

...
mutations: {
  sum (state, num) {
    state.count += num
  }
},
actions: {
  // context 上下文对象，可以理解为store
  sum_actions (context, num) {
    setTimeout(() => {
      context.commit('sum', num)  // 通过context去触发mutions中的sum
    }, 1000)
  }
},

템플릿에서 디스패치를 ​​통해 작업에 정의된 sum_action 메서드를 호출합니다

// ...template
store.dispatch('sum_actions', num)

promise를 사용하여 비동기 작업을 완료하고 구성 요소에 성공을 알립니다. 또는 비동기 실행이 실패했습니다.

// ...
const addAction = (num) => {
  store.dispatch('sum_actions', {
    num
  }).then((res) => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })
}

sun_action 메소드는 약속을 반환합니다. 누적된 값이 30보다 크면 더 이상 누적되지 않고 오류가 발생합니다.

 actions: {
    sum_actions (context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 通过 context 上下文对象拿到 count
          if (context.state.count < 30) {
            context.commit(&#39;sum&#39;, payload.num)
            resolve(&#39;异步操作执行成功&#39;)
          } else {
            reject(new Error(&#39;异步操作执行错误&#39;))
          }
        }, 1000)
      })
    }
  },

4.Getters

컴포넌트의 계산된 속성과 유사

import { createStore } from 'vuex'

export default createStore({
  state: {
    students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]
  },
  getters: {
    more20stu (state) { return state.students.filter(item => item.age >= 20)}
  }
})

$store.getters 메소드 이름을 통해 호출된 getter의 입력 매개변수를 사용하여 getter는 두 개의 매개변수를 받을 수 있습니다. 하나는 상태이고 다른 하나는 그 자체입니다. 자체 기존 메서드를 호출합니다.

//...template
<h3 id="store-getters-more-stu">{{$store.getters.more20stu}}</h3> // 展示出小于20岁的学生

getters의 매개변수 및 매개변수 전달 방법

위는 getter의 두 가지 고정 매개변수입니다. getter에 매개변수를 전달하고 연령보다 나이가 많은 사람을 필터링하도록 하려면 이렇게 하면 됩니다

Return 이 함수는 Age를 받아들이고

getters: {
  more20stu (state, getters) { return getters.more20stu.length}
}

5.modules

를 사용하여

getters: {
  more20stu (state, getters) { return getters.more20stu.length},
  moreAgestu (state) {
      return function (Age) {
        return state.students.filter(item =>
          item.age >= Age
        )
      }
    }
  // 该写法与上边写法相同但更简洁，用到了ES6中的箭头函数，如想了解es6箭头函数的写法
  // 可以看这篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501
  moreAgestu_Es6: state => {
    return Age => {
      return state.students.filter(item => item.age >= Age)
    }
  }
}

를 처리합니다. 애플리케이션이 복잡해지면 상태에서 관리하는 변수의 수가 늘어나고 저장소 개체가 상당히 커질 수 있습니다.

이 문제를 해결하기 위해 vuex를 사용하면 저장소를 모듈로 나눌 수 있으며 각 모듈에는 고유한 상태, 돌연변이, 동작, 게터 등이 있습니다.

스토어 파일에 새 모듈 폴더를 만듭니다.

모듈에서 에서는 단일 모듈을 만들 수 있으며, 하나의 모듈이 하나의 모듈의 기능을 처리합니다

store/modules/user.js 处理用户相关功能

store/modules/pay.js 处理支付相关功能

store/modules/cat.js 处理购物车相关功能

// user.js模块
// 导出
export default {
  namespaced: true, // 为每个模块添加一个前缀名，保证模块命明不冲突 
  state: () => {},
  mutations: {},
  actions: {}
}

最终通过 store/index.js 中进行引入

// store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
  modules: {
    user,
    pay,
    cat
  }
})

在template中模块中的写法和无模块的写法大同小异，带上模块的名称即可

<h3 id="store-state-user-count">{{$store.state.user.count}}</h3>

store.commit('user/sum', num) // 参数带上模块名称
store.dispatch('user/sum_actions', sum)

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