vuex最简单使用

vuex,即vue里面的一个插件，使用场景:需要一个购物车功能，可能有多个组件会调用到这个购物车功能，在首页添加了一个商品，在详情页是也要看到添加的商品。这个时候组件传值就不方便，使用vuex存储这个购物车的数据，然后每个组件调用出来，就十分方便。
最简单的示例(文件均运行在vuecli中，默认main.js已经引用)：
store.js,即vuex文件

export default new Vuex.Store({
    state: { //初始值,前端可直接调用
        huanggua: 0,
        xigua: 0
    },
    mutations: { //事件触发的操作,前端调用,操作购物车增加
        addHG(state) {
            state.huanggua++
        },
        addXI(state) {
            state.xigua++
        }
    },
        actions: {//跟上面一样，函数方法,但这个异步
        asyncInrement(context) {
            return new Promise(resolve => {
                setTimeout(() => {
                    context.commit('addHG');
                    resolve();
                }, 1000)
            });
        }
    },
    modules: {

    }
})

index.vue

<template>
    <div>
           <router-link to="list">去列 表页</router-link> 
            <p>
                <span>黄瓜</span>  
                <i>{{huanggua}}</i>
                <button @click="asyncIncrementByAction" value="">添加</button>
            </p>
            <p>
                <span>西瓜</span>  
                <i>{{xigua}}</i>
                <button @click="AddXI" value="">添加</button>
            </p>
        </div>
</template>

<script>
export default {
    methods:{//发送方法到vuex
      asyncIncrementByAction() {
        this.$store.dispatch('asyncInrement').then(() => {
          console.log(this.$store.state.huanggua);

        })
      },
        AddXI() {
            this.$store.commit('addXI')
        }
    },
    computed:{//接收vuex数据
        huanggua(){
            return this.$store.state.huanggua
        },
        xigua(){
            return this.$store.state.xigua
        }
    },
}
</script>

列表页调用购物车数据,只要首页增加了，列表页也会增加。如果列表也调用了方法，添加后首页数据也会变。

<template>
    <div>
        <p>
            <span>黄瓜</span>  
            <i>{{huanggua}}</i>
        </p>
        <p>
            <span>西瓜</span>  
            <i>{{xigua}}</i>
        </p>
    </div>
</template>

<script>
export default {
    computed:{//接收数据
        huanggua(){
            return this.$store.state.huanggua
        },
        xigua(){
            return this.$store.state.xigua
        }
    },
}
</script>

注:modules可以让每个模块拥有自己的state、mutation、action、getters, 使得结构非常清晰

//不使用module
export default new Vuex.Store({
   state:{
            params1:'',
            params2:'',
            params3:'',
            params4:'',
            params5:'',
            .....
            //如果项目大会有很多很多个
}
});

//使用module
export default new Vuex.Store({
    modules: {
        moduleA,
        moduleB，
    }
});

//module通过import引入进来
moduleA={
    state:{
             params1:'',
            params2:'',
   }

moduleB={
    state:{
             params3:'',
            params4:'',
   }

}