vue学习-------------vuex篇

demo地址：https://gitee.com/kkkklkm/learnVuex

 

话不多说，采用上面的方式来查看组件间的状态统一性

<div>
    <div>组件1<div>
    <div>组件2<div>
    <div>组件3<div>
    <div>组件4<div>
</div>

引入：

1，npm install vuex --save
2，开一个store文件夹，放一个index.js，配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        },
        decrease(state, n = 1) {
            state.count-=n
        }
    },
    getters:{
        dubble(state){
            return state.count * 2
        }
    },
    actions: {
        addFive(ctx) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    ctx.commit('increment', 5)
                    resolve()
                }, 5000);
            })
        }
    },
})

3，在main.js引入 store ，放入Vue实例中，即可。
4，在对应的组件中使用
    this.$store.state 可以获取state数据
    this.$store.commit('increment')可以进行修改数据，不建议处理异步任务
    this.$store.getters  可以获取getters中的数据（getters仿佛就是组件中的computed）
    this.$store.disappatch('addFive')  当需要异步的修改时，要使用actions来包裹处理mutations的任务