main.js

const store = new Vuex.Store({
    //配置
})

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

注意Vuex.Store的Store S大寫

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        increase(state){
            state.count++
        },
        decrease(state){
            state.count--
        }
    },
})

state 存放初始狀態(tài)值
mutations 存放改變狀態(tài)的函數(shù)

users.vue

<template>
    <div>
        <p>用戶{{$route.params.id}}</p>
        <p>數(shù)量：{{num}}</p>
        <button @click="add">+1</button>
        <button @click="dec">-1</button>
    </div>
</template>
<script>
    export default{
        computed:{
            num(){
                return this.$store.state.count
            },
        },
        mounted(){
            console.log(this.$route)
        },
        methods:{
            add(){
                this.$store.commit('increase')
            },
            dec(){
                this.$store.commit('decrease')
            },
        }

    }
</script>

• this.$store.state.count獲取狀態(tài)值
• this.$store.commit('increase')調(diào)用改變狀態(tài)的函數(shù)

高級用法getters

const store = new Vuex.Store({
    state:{
        list:[2,3,5,8,13,21]
    },
    getters:{
        filterList(state){
            return state.list.filter(item=>item >10)
        }
    }
})

//user.vue
<template>
    <div>
        <p>{{filterList}}</p>
    </div>
</template>
<script>
    export default{
        computed:{
            filterList(){
                return this.$store.getters.filterList
            }
        },
    }
</script>

this.$store.getters.filterList調(diào)用getters里的方法

高級用法actions 操作異步