Vue.js 상태 관리 모드 Vuex 설치 및 사용(코드 예시)

이 글은 Vue.js 상태 관리 모드 Vuex(코드 예제)의 설치 및 사용에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신.

uex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

vuex 설치 및 사용

먼저 vue.js 2.0 개발 환경에 vuex를 설치합니다:

npm install vuex --save

그런 다음 main.js에 추가합니다: #🎜🎜 #

import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//store对象
    state:{
        show:false,
        count:0
    }
})

그런 다음 Vue 객체를 인스턴스화할 때 store 객체를 추가합니다:

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<app></app>',
  components: { App }
})

이제 store.state를 통해 상태 객체를 가져오고 store.commit 메소드를 통해 상태 변경을 트리거할 수 있습니다. ：# 🎜🎜#

store.commit('increment')

console.log(store.state.count) // -> 1

State

Vue 구성 요소에서 Vuex 상태 가져오기

스토어 인스턴스에서 상태를 읽는 가장 쉬운 방법은 계산된 속성에 있습니다. 특정 상태:

// 创建一个 Counter 组件
const Counter = {
  template: `<p>{{ count }}</p>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 보조 함수

구성 요소가 여러 상태를 얻어야 하는 경우 이러한 상태를 계산된 속성으로 선언하는 것은 다소 반복적이고 중복됩니다. 이 문제를 해결하기 위해 mapState 보조 함수를 사용하여 계산된 속성을 생성할 수 있습니다.

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

매핑된 계산된 속성의 이름이 상태의 하위 노드 이름과 동일한 경우 , mapState 문자열 배열에 문자를 전달할 수도 있습니다.

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

Getter

getters는 vue의 계산과 유사하며 상태를 계산한 다음 새 데이터를 생성하는 데 사용됩니다( 상태), 계산된 속성과 마찬가지로 getter의 반환 값은 종속성에 따라 캐시되며 종속성 값이 변경될 때만 다시 계산됩니다.

Getter는 상태를 첫 번째 매개변수로 받아들입니다.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Accessed via Properties

The Getter는 store.getters 객체로 노출됩니다. access with 속성 형식으로 다음 값에 액세스합니다:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 다른 getter를 두 번째 매개변수로 사용할 수도 있습니다:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

구성 요소에 사용: #🎜🎜 #

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

Vue 반응 시스템의 일부로 속성을 통해 액세스할 때 게터가 캐시된다는 점에 유의하세요.

메서드를 통한 액세스

메서드를 통한 액세스

getter가 함수를 반환하도록 하여 getter에 매개변수를 전달할 수도 있습니다. 저장소의 배열을 쿼리할 때 매우 유용합니다.

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

메서드를 통해 getter에 액세스하면 결과를 캐시하지 않고 매번 호출된다는 점에 유의하세요.

mapGetters 보조 함수

mapGetters 보조 함수는 저장소의 게터를 로컬 계산 속성에 매핑합니다.

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

getter 객체 형식을 사용하여 속성에 다른 이름을 지정합니다.

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation

Vuex 스토어에서 상태를 변경하는 유일한 방법은 변형을 제출하는 것입니다.

등록:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

전화:

store.commit('increment')

페이로드 제출

store.commit로 전달할 수 있습니다. 추가 매개변수 입력 , 즉 돌연변이의 페이로드:

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

여러 매개변수를 제출하는 경우 객체 형식으로 제출해야 합니다.

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

참고: 돌연변이의 작업은 다음과 같아야 합니다.

Action

Action은 변형과 유사하지만 차이점은 다음과 같습니다.

Action은 변형을 제출합니다. 상태를 직접 변경하는 것보다.

• Action에는 모든 비동기 작업이 포함될 수 있습니다.

• const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
      increment (context) {
        context.commit('increment')
      }
    }
  })

  Action은 store.dispatch 메서드를 통해 트리거됩니다.

store.dispatch('increment')

액션 내에서 비동기 작업 실행:

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

#🎜 🎜# 객체 형식으로 매개변수 전달:

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

관련 권장사항:

Vue.js of vuex(상태 관리)

# 🎜🎜#

Vuex 상태 관리 사용 방법

Vuex 제품군 버킷 상태 관리 정보

위 내용은 Vue.js 상태 관리 모드 Vuex 설치 및 사용(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!