Vuex의 핵심 개념

Vuex의 핵심 개념

본문은 주로 요약하여 Vuex를 정리한다.Store 인스턴스화 중에 들어오는 객체의 속성입니다.다음store,getter,mutations,actions 속성과 같다.

// store.js
const store = Vuex.Store({
        state: {
                count: 0,
                todos: [
                    {
                        {id: 1, done: true},
                        {id: 2, done: false}
                    }
                ]
            },
        getters: {
                doneTodos: state => {
                    state.todos.filter(todo => todo.done)
                }
            },
        mutations: {
                increment: state => state.count++
            },
        actions: {
                increment: context => {
                    context.commit('increment');
                },
                incrementAsync ({commit}) {
                    setTimeout(() => {
                            commit('increment');
                        }, 1000)
                }
        }
    })
module.exports = store;

state,getters,mutations,actions 연계와 차이

states에서 이 모든 데이터 상태를 관리

getters에는 state에서 파생된 상태가 저장되어 있으며, 기본적으로 전송된 파라미터는state

이다.

mutations에state상태를 바꾸는 방법이 저장되어 있습니다. 동기화 작업만 포함할 수 있고state변경은 여기서만 가능합니다. 기본적으로 전송된 파라미터는state

입니다.

actions에 저장된 것도state 상태를 바꾸는 방법이지만mutations 제출을 통해 수정된 것으로 비동기적으로 실행할 수 있습니다. 기본적으로 전송된 파라미터는context

입니다.

하위 구성 요소에서state의 상태와 파생 상태를 사용합니다

먼저 store를 루트 Vue에 추가

// app.js
const store = require('store.js')
var app = new Vue({
        components: {
            com1,
            com2
        }
        store
    })

구성 요소에서 호출

// com1.vue


    export default {
        data () {
            return {
                localCount: 0
            }
        },
        computed: {
            //  state 
            count () {
                return this.$store.state.count;
            }
            //  
            doneTodos () {
                return this.$store.getters.doneTodos;
            }
        }
    }

보조 함수 mapState, mapGetters를 사용할 수도 있습니다.

// com1.vue


    import { mapState, mapGetters } from 'vuex';
    export default {
        data () {
            return {
                localCount: 0
            }
        },
        computed: {
            ...mapState({
                count: state => state.count
            }),
            ...mapGetters({
                doneTodos: getters => getters.doneTodos
            })
        }
    }

서브어셈블리에서 state 변경

하위 구성 요소에서mutations를 제출하거나 actions를 나누어 줍니다

// com1.vue


    export default {
        methods: {
            increment () {
                this.$store.commit(increment);
                this.$store.dispatch(incrementAsync);
            }
        }
    }

전재 대상:https://www.cnblogs.com/ykli/p/9565074.html