vuex

vuex是一个专为vue应用程序开发的状态管理模块

在vue中的配置使用

import Vue from vue
import Vuex from vuex
import App from ./app
Vue.use(Vuex)

　Vue.config.productionTip = false

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount(state) {
            state.count++
        }
    },
    actions: {
        timeAdd(state) {
　　　　　　　state.commit('mutations')
            setTimeout(() => {
                state.count++
            }, 3000)
        }
    },
    getters: {
        doubleCount(state){
            return state.count * 2
        }
    }
}) 

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

<template>
    <div>
        {{ $store.state.count }}
        {{ $store.getters.double }}
        <button @click="$store.commit('addCount')">mutations</button>
        <button @click="$store.dispatch('timeAdd')">mutations</button>
    </div>
</template>

state：提供一个响应式数据

getters: 借助Vue计算属性computed来实现缓存

mutations：更改state方法

actions：触发mutations方法