vuex

[hoperyy]

使用 vuex

./store/index.js

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

export default new vuex.Store({
    state: {
        show: true
    }
})

./index.js

import store from './store/index';

new Vue({
    el: '#app',
    store
});

任何组件都可以使用 this.$store.state.show

多个 store

./store/index.js 修改

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

import dialogSore from './dialog';
import alertStore from './alert';

export default new vuex.Store({
    modules: {
        dialog: dialogSore,
        alert: alertStore
    }
})

新增 ./store/dialog.js

export default {
    state: {
        show: true
    },
    mutations: {
        // 这里的 state 对应上面的 state
        switchDialog(state) {
            state.show = !state.show;
        }
    }
}

任何组件都可以使用：this.$store.state.dialog.show

修改数据库（mutations）

修改 ./store/dialog.js

export default {
    state: {
        show: true
    },
    mutations: {
        // 这里的 state 对应上面的 state
        switchDialog(state) {
            state.show = !state.show;
        }
    }
}

任何组件都可以使用：this.$store.commit('switchDialog') 修改状态。

<a href="javascript:;" @click="$store.commit('switchDialog')">click me</a>

使用 commit 触发修改的好处：

• 更清晰的约定，方便开发者看到哪些地方对 store 做了修改
• 方便开发者工具生成数据流变动快照，用于调试

其他：

• mutations 中的方法是不分组件的。在多个个组件里定义了多个同名 mutation 方法，那么 $store.commit 会触发所有的方法执行

  如果多个 store 都定义了这个 switchDialog，所有的都会触发执行。

• mutations 操作必须是同步的

数据处理（actions）

修改 ./store/dialog.js

export default {
    state: {
        show: true
    },
    mutations: {
        // 这里的 state 对应上面的 state
        switchDialog(state) {
            state.show = !state.show;
        }
    },
    actions: {
        // 这里的 ctx 和我们使用的 $store 拥有相同的对象和方法
        switchDialog(ctx) {
            ctx.commit('switchDialog');
        }
    }
}

用 dispatch 代替 commit:

<a href="javascript:;" @click="$store.dispatch('switchDialog')">click me</a>

和 commit 一样，如果多个 store 中定义了同一个 action 方法，dispatch 会触发所有的同名方法执行。

官方推荐，将异步操作放在 action 中。

获取数据（Getters）

修改 ./store/dialog.js

export default {
    state: {
        show: true
    },
    getters: {
        noShow(state) {
            return !state.show;
        }
    },
    mutations: {
        switchDialog(state) {
            state.show = !state.show;
        }
    },
    actions: {
        switchDialog(ctx) {
            ctx.commit('switchDialog');
        }
    }
}

参考文章

• https://zhuanlan.zhihu.com/p/24357762
• https://segmentfault.com/a/1190000011716027