vuex的使用

vuex的使用例子

store.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
    count: 1
}
// 同步修改
const mutations = {
    add(state, value) {
        state.count += value;
    },
    reduce(state) {
        state.count--;
    },
}
const getters = {
    count: function(state) {
        return state.count += 100;
    }
}
// 异步修改
const actions = {
    addAction(context) {
        context.commit('add', 10);
    },
    reduceAction({commit}) {
        commit('reduce');
    }
}
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

vue页面

• 数据：{{$store.state.count}} <==> {{count}}
• 方法调用：$store.commit('add', 10) <==> add(10)

import store from '@/vuex/store';
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
export default {
    // 写法一
    // computed: {
    //     count() {
    //         return this.$store.state.count;
    //     }
    // },
    
    // 写法二
    // computed: mapState({
    //     count: state => state.count
    // }),
    
    // 写法三
    // computed: mapState(['count']),
    
    // 写法四
    computed: {
        ...mapState(['count']),
        // count {
        //     return this.$store.gettrs.count;
        // }
        ...mapGetters(['count'])
    },
    methods: {
        ...mapMutations(['add', 'reduce']),
        ...mapActions(['addAction', 'reduceAction'])
    },
    store
}