uniapp에서 vuex를 사용하여 데이터를 저장하는 방법

uniapp에서 vuex를 사용하면 구성 요소 간의 데이터 공유 및 관리를 보다 편리하고 간결하게 만드는 데 도움이 될 수 있습니다. vuex에 데이터를 저장하는 방법도 우리가 마스터해야 할 중요한 기술입니다. 다음은 vuex를 사용하여 uniapp에 데이터를 저장하는 방법을 자세히 소개합니다.

1. vuex에서 상태 정의

vuex에서는 먼저 상태, 돌연변이, 작업, 게터 등과 같은 속성과 메서드를 포함하는 전역 상태 관리자인 저장소를 정의해야 합니다. 그리고 상태는 데이터를 저장하는 열쇠입니다.

uniapp에서는 src 디렉토리 아래의 store 폴더에 index.js 파일을 생성하고 그 안에 상태를 정의할 수 있습니다. 예:

const state = {
  username: ''
}

여기에서는 사용자 이름 속성이 포함된 상태 개체를 정의하고 이를 빈 문자열로 초기화합니다. 이 사용자 이름은 vuex에 저장하려는 데이터입니다.

2. 상태를 수정하려면 돌연변이를 사용하세요

다음으로 돌연변이를 정의해야 합니다. 돌연변이에서는 데이터 추가, 데이터 수정, 데이터 삭제 등과 같은 다양한 작업을 정의할 수 있습니다. 여기서는 데이터를 상태에 저장하는 방법을 보여주기 위해 데이터 수정을 예로 들어 보겠습니다.

src/store/index.js 파일에서 mutations 메소드를 다음과 같이 정의합니다.

const mutations = {
  setUsername (state, payload) {
    state.username = payload
  }
}

여기에서는 state와 payload라는 두 개의 매개변수를 받는 setUsername 메소드를 정의합니다. 상태는 이전 단계에서 정의한 상태 개체이고 페이로드는 수정된 데이터입니다.

setUsername 메소드는 상태 객체의 사용자 이름 속성을 수정하여 상태에 데이터를 저장하는 목적을 달성합니다.

3. 컴포넌트에서 vuex 사용

vuex에서 데이터를 정의하고 저장했으므로 이제 이를 컴포넌트에서 사용해야 합니다.

우리가 사용해야 하는 컴포넌트에는 vuex를 도입하고 mapState와 같은 메소드를 사용하여 해당 컴포넌트에서 사용할 수 있도록 상태의 데이터를 가져와야 합니다.

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  mounted () {
    console.log(this.username) // 打印出保存在vuex中的数据
  }
}

여기에서는 mapState 메소드를 사용하여 vuex의 데이터를 구성 요소의 계산 속성에 매핑하고 별칭을 사용자 이름으로 지정합니다. 그러면 구성 요소에서 this.username을 사용하여 vuex에 저장된 데이터를 가져올 수 있습니다. .

4. 컴포넌트에서 vuex의 데이터를 수정합니다

이전 단계에서 이미 컴포넌트의 vuex에 저장된 데이터를 가져올 수 있습니다. 다음 단계는 vuex에서 데이터를 수정하는 방법입니다. 구성 요소에서.

컴포넌트에서는 this.$store.commit('mutations method name', data)를 통해 mutations의 메소드를 제출하고 상태의 데이터를 수정할 수 있습니다.

methods: {
  modifyUsername () {
    this.$store.commit('setUsername', 'newUsername')
  }
}

여기에서는 수정 사용자 이름 메서드를 정의합니다. 구성 요소에서 이를 호출하면 this.$store.commit 메서드를 통해 setUsername 메서드를 제출하고 새 데이터 newUsername을 전달할 수 있습니다. 이런 방식으로 vuex에 저장된 데이터를 수정할 수 있습니다.

5. 요약

위의 단계를 통해 vuex를 사용하여 uniapp에서 데이터를 저장하고 관리하는 방법을 배울 수 있습니다. 단계는 간단하고 실제로는 어렵지 않습니다. 크거나 복잡한 애플리케이션을 작성할 때 vuex를 사용하면 코드의 유지 관리성과 가독성이 향상되고 개발 프로세스 속도도 빨라질 수 있습니다.

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