三个概念

state

• data

state: {
    count: 0
    tag: undefined
}

mutation

• methed

addCount(state) {
    state.count += 1
}

action

• 调用methed

例子

例子一

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        weather: '晴天'
    },
    mutations: {
        modifyWeather(state) {
            state.weather = '下雨'
            console.log(state.weather)
        }
    }
})

store.commit('modifyWeather')

例子二（结合 Vue）

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0,
        firstName: 'hunger',
        lastName: 'valley'
    },
    mutations: {
        increment(state) {
            state.count++
        },
        modifyFirstName(state, newName) {
            state.firstName = newName
        }
    },
    getters: {
        fullName(state) {
            return state.firstName + ' ' + state.lastName
        }
    }
})

const Counter = {
    template: `
        <div>
            <div>{{ count }}</div>
            <div>{{ firstName }} {{ lastName }}</div>
            <p>{{fullName}}</p>
            <button @click="add">+</button>
        </div>
        `,
    computed: {
        count() {
            return this.$store.state.count
        },
        fullName() {
            return this.$store.getters.fullName
        }
        // ... Vuex.mapGetters(['fullNmae'])
        ... Vuex.mapState(['firstName', 'lastName'])
    },
    methods: {
        add() {
            this.$store.commit('increment')
        }
    }
}

const app = new Vue({
    el: '#app',
    store,
    components: { Counter },
    template: `
        <div class="app">
            <counter></counter>
        </div>
    `
})

读 和 写

• 读

// 对象 computed
this.$store.state.count

// 类 js/ts
get count() {}

• 写

store.commit('addCount', payload)

切记

• index.ts: Vue.use(Vuex)
• main.ts: new Vue({ store })