vuex의 5가지 속성은 무엇입니까?

vuex의 5가지 속성은 다음과 같습니다. 1. 변수를 저장하는 데 사용되는 상태 속성 2. 상태의 계산된 속성과 동일함 3. 업데이트된 데이터를 제출하는 데 사용되는 변형 속성 5. 모듈 속성 모듈러 Vuex의 경우.

권장: "vue Tutorial"

vue에서 vuex의 5가지 속성 및 기본 사용법

VueX는 Vue.js 애플리케이션용으로 특별히 설계된 상태 관리 프레임워크로, 각각의 애플리케이션을 통합 관리 및 유지 관리합니다. vue 구성 요소의 변경 가능한 상태(vue 구성 요소의 일부 데이터로 이해할 수 있음)

Vuex에는 5가지 핵심 개념이 있습니다:

state,getters,mutations,actions,modules.

1. 상태: 변수를 저장하는 데 사용되는 vuex의 기본 데이터

2. geeter: 기본 데이터(상태)에서 파생된 데이터, 상태의 계산된 속성과 동일함

3. 돌연변이: 업데이트된 데이터를 제출하는 방법, 필수 동기식입니다(작업을 비동기식으로 사용해야 하는 경우). 각 변형에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다.

콜백 함수는 실제로 상태를 변경하는 곳으로, 상태를 첫 번째 매개변수로 받아들이고 페이로드를 두 번째 매개변수로 제출합니다.

4. Action: 함수는 mutation과 거의 동일합니다. 차이점은 ==》1. Action은 상태를 직접 변경하는 대신 mutation을 제출합니다. 2. 작업에는 모든 비동기 작업이 포함될 수 있습니다.

5. 모듈: 모듈식 vuex를 사용하면 각 모듈에 고유한 상태, 돌연변이, 동작 및 게터가 있어 구조가 매우 명확하고 관리하기 쉽습니다.

Vuex 사용법:

새 vue 프로젝트 만들기 testApp ==》 testApp에 ​​스토어 파일 빌드 ==》 스토어 파일 아래에 모듈 폴더와 getter.js 및 index.js가 있습니다 ==》 user.js 빌드 스토어 파일 아래

'./store'에서 스토어 가져오기 프로젝트의 main.js에 도입

스토어 파일 아래 index.js에 도입

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store
　　在store文件下的getters.js中引入
const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}
export default getters
　　在modules文件下的user.js写代码
const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user

데이터를 저장하려면 다음 두 가지 방법을 사용하세요.

　　dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

위 내용은 vuex의 5가지 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!