vuex

store.js

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

Vue.use(Vuex)

// 状态访问对象
const state={
    count:1
}
// 修改状态
const mutations={
    add(state,n){
        state.count+=n
    },
    reduce(state){
        state.count--
    }
}
// 过滤器
const getters={
    count:(state)=>state.count+=10
}
// 异步修改状态
const actions={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
export default new Vuex.Store({
    state,mutations,getters,actions
})

使用：

<template>
    <div>
        <h3>{{msg}}</h3>
        <h1>{{count}}</h1>
        <div>
            <button @click="add(10)">+</button>  
            <button @click="reduce">-</button>  
        </div>
        <div>
            <button @click="addAction(10)">+</button>  
            <button @click="reduceAction">-</button>  
        </div>
    </div>
</template>

<script>
import store from '@/vuex/store' 
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default {
        data(){
            return {
                msg:'hello vuex'
            }
        },
       computed:{
           ...mapState(['count']),
           ...mapGetters(['count'])
       },
       methods:{
           ...mapMutations(['add','reduce']),
           ...mapActions(['addAction','reduceAction'])
       },
        store
    }
</script>

<style scoped>

</style>