vuex 个人整理 个人纪录

vuex:{
    store文件夹:{
        index.js:{
            import Vue from 'vue';
            import Vuex from 'vuex';
            import getters from './getters';
            import first from "./model/first"
            Vue.use(Vuex);
            export default new Vuex.Store({
                modules: {  //对应的每个模块  数据模块分割
                    first,
                },
                getters
            });
        }
        getters.js:{
            const getters = {
                helloAll:state=>state.first.helloAll
            }
            export default getters
        }
        model文件夹:{
            first.js:{
                const helloAll = {
                    a:'1'
                }
                const first = {
                    state:{
                        helloAll
                    },
                    actions:{
                        //异步函数调用
                    }

                }
                export default first
            }
        }
    }
    创建完成之后需要在main.js里面引入
    eg:{
        import store from './store/index'
        之后再实例里面运行store
        new Vue({
            el: '#app',
            router,
            store,
            components: { App },
            template: '<App/>'
        })
    }
    最后   在页面中引入vuex的mapGetters方法
    eg:{
        import { mapGetters } from 'vuex';
        computed: {
            ...mapGetters([
                "helloAll"
            ])
        },
        通过this.helloAll来访问我们创建仓库的值
    }
}