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

不言

풀어 주다： 2018-09-01 16:44:02

원래의

1882명이 탐색했습니다.

이 글은 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 상태 관리 모드 Vuex 설치 및 사용(코드 예시)

vuex 설치 및 사용

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

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

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

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

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

getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } }
로그인 후 복사

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
로그인 후 복사

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }
로그인 후 복사

// ... mutations: { increment (state, n) { state.count += n } }
로그인 후 복사

store.commit('increment', 10)
로그인 후 복사

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

vuex 설치 및 사용

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

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

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

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

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

getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } }로그인 후 복사 store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }로그인 후 복사

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }로그인 후 복사

// ... mutations: { increment (state, n) { state.count += n } }로그인 후 복사 store.commit('increment', 10)로그인 후 복사

getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } }
로그인 후 복사

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
로그인 후 복사

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }
로그인 후 복사

// ... mutations: { increment (state, n) { state.count += n } }
로그인 후 복사

store.commit('increment', 10)
로그인 후 복사