Vuex--的使用

Vuex-store ：是用来将各个组件之间管理状态，共享数据,能够在项目中共同的去使用store里面的属性方法

安装

yarn add vuex

引入 vuex

impory Vuex from 'vuex'
Vue.use(Vuex)

创建状态仓库

let store = new Vuex.Store({
    state:{
        xxx:xxx
    }
})

通过 this,$store.state.xxxx 获取到数据

Vuex的相关操作

Vuex状态管理的流程

view -> actions -> mutations -> state -> view

改变状态

// 通过 muations 来更改state里面的数据
let store = new Vuex.Store({
    state:{
        xxx:xxx
    },
    mutations:{
        add(state){
            state.xxx = 111
        }
    }
})

this.$store.commit('add') 调用 mutations 里面的 add 方法

actions 可以包含异步的操作，但是提交的是mutations,而不是直接改变状态

let store = new Vuex.Store({
    state:{
        xxx:1
    },
    mutations:{
        add(state){
            state.xxx+=1
        },
        reduce(state){
            state.xxx-=1
        }
    },
    actions:{
        adds(context){
            setTimeout(()=>{
                context.commit(reduce)
            })
        }
    }
})

getters 是对state的判断，一般都是通过getters来获取state的状态

this.$store.getters.getXXX

let store = new Vuex.Store({
    state:{
        xxx:1
    },
    mutations:{
        add(state){
            state.xxx+=1
        },
        reduce(state){
            state.xxx-=1
        }
    },
    actions:{
        adds(context){
            setTimeout(()=>{
                context.commit(reduce)
            })
        }
    },
    getters:{
        getXxx(state){
            return state.xxx >0? state.xxx : 0
        }
    }
})