Vuex入门

官方文档：https://vuex.vuejs.org/zh/

一、安装Vuex

$ npm install vuex --save

二、创建store

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        right: {
            expand: true
        },
        traveller_data: {}
    },
    getters: {},
    mutations: {
        CHANGE_RIGHT_EXPAND(state) {
            state.right.expand = !state.right.expand;
        },
        GET_TRAVELLER_DATA(state, traveller_data) {
            state.traveller_data = traveller_data;
        }
    },
    actions: {}
})

三、导入

main.js

import Vue from 'vue'
import store from './store'
import App from './App.vue'

new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

四、页面使用

App.vue

<script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        computed: {
            ...mapState(['right'])
        },
        methods: {
            ...mapMutations(['CHANGE_RIGHT_EXPAND']),
            changeRightExpand() {
                this.$store.commit('CHANGE_RIGHT_EXPAND');
            }
        },
        mounted() {
            console.log(this.right);
            this.changeRightExpand();
            // this.$store.commit('GET_TRAVELLER_DATA', {west_data: {}});
        }
    }
</script>

更多使用，请看官方文档。