Vuex 搭建vuex环境

一、概念

        在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

二、何时使用？

        多个组件需要共享数据时。

三、搭建vuex环境

        1.创建文件：src/store/index.js

    //引入Vue核心库

    import Vue from 'vue'

    //引入Vuex

    import Vuex from 'vuex'

    //应用Vuex插件

    Vue.use(Vuex)

    //准备actions对象——响应组件中用户的动作

    const actions = {}

    //准备mutations对象——修改state中的数据

    const mutations = {}

    //准备state对象——保存具体的数据

    const state = {}

    //创建并暴露store

    export default new Vuex.Store({

        actions,

        mutations,

        state,

    })

         2.在main.js中创建vm时传入store配置项

        

    import Vue from "vue";

    //引入store

    import store from "./store";

    import App from "./App"

    Vue.config.productionTip = false

    new Vue({

        el:'#App',

        render: h => h(App),

        store,

        beforeCreate(){

            Vue.prototype.$bus = this

        }

    })

四、基本使用_求和案例

        1.初始化数据、配置actions、配置mutations，操作文件store.js。

        2.组件中读取vuex中的数据：$store.state.sum。

        3.组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)。

        4.备注：若没有网络请求或其他业务逻辑简单，组件中也可以越过actions，即可以不写dispatch，直接编写commit。

/*    store.js    */
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
    incrementOdd(context,value){
        if(context.state.sum % 2)
            context.commit('INCREMENTODD',value)
    },
    incrementWait(context,value){
        setTimeout(() => {
            context.commit('INCREMENTWAIT',value)
        }, 500);
    }
}
//准备mutations对象——修改state中的数据
const mutations = {
    INCREMENT(state,value){
        state.sum +=value
    },
    DECREMENT(state,value){
        state.sum -=value
    },
    INCREMENTODD(state,value){
        state.sum +=value
    },
    INCREMENTWAIT(state,value){
        state.sum +=value
    },
}
//准备state对象——保存具体的数据
const state = {
    sum:0
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

/*    Count.vue    */
<template>
    <div class="main">
        <h2>当前求和为：{{ $store.state.sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前为奇数再加</button>
        <button @click="incrementWait">等会再加</button>
    </div>
</template>

<script>
    export default {
        name:'Count',
        data() {
			return {
                n:1
			}
		},
        methods: {
            increment(){
                //只需要执行state中sum的加法功能，逻辑简单可以不写dispatch
                this.$store.commit('INCREMENT',this.n)
            },
            decrement(){
                //只需要执行state中sum的减法功能，逻辑简单可以不写dispatch
                this.$store.commit('DECREMENT',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('incrementOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('incrementWait',this.n)
            },
        },
    }
</script>

<style lang="less" scoped>
    button{
        margin-left: 5px;
    }
</style>

五、getters配置项

        1.概念：当state中的数据需要经过加工后在使用时，可以使用getters加工。

        2.在store.js中追加getters配置

        ...............

        const getters = {

                bigSum(state){

                        return state.sum*10

                }

        }

        

        export default new Vuex.Store({

                ...............

                getters

        })

        3.组件中读取数据：$store.getters.bigSum。

/*    store.js    */
..............
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    ..............
    getters
})

/*    Count.vue    */
<template>
    <div class="main">
        ..................
        <h3>当前求和放大十倍为：{{ $store.getters.bigSum }}</h3>
        ..................
    </div>
</template>