Vuex+getters

最新推荐文章于 2024-01-16 10:44:40 发布

HeX_7

最新推荐文章于 2024-01-16 10:44:40 发布

阅读量238

点赞数

分类专栏： # Vue 文章标签： javascript 前端

本文链接：https://blog.csdn.net/HeX_7/article/details/125284392

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vuex

1.概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写)，

也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用?

多个组件需要共享数据时

3.搭建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配置项

 ...

            //引入store

            import store from './store'

            ...

            //创建vm

            new Vue({

            el:'#app',

            render: h => h(App),

            store

            })

App.vue


<template>
    <Count/>
</template>

<script>
    import Count from './components/Count'
    export default {
        name:'App',
        components:{Count},
        /* mounted() {
            console.log('App',this)
        }, */
    }
</script>

<style scoped>
</style>

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import vueResource from 'vue-resource'
// 引入store
import store from './store'//因为文件名是index.js引入到这vue会自动选择index

// 关闭Vue生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(vueResource)

// 创建vm
new Vue({
    el:"#app",
    store,
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

index.js

// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
//引入Vuex 
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作
const actions = {
    /* jia:function(context,value){
        console.log('actions中的jia被调用',context,value);
        context.commit('JIA',value)
    },
    jian:function(context,value){
        console.log('actions中的jian被调用',context,value);
        context.commit('JIAN',value)
    }, */
    jiaOdd:function(context,value){
        console.log('actions中的jiaOdd被调用',context,value);
        if (context.state.sum % 2) {
            context.commit('JIA',value)
        }
    },
    jiaWait:function(context,value){
        console.log('actions中的jiaWait被调用',context,value);
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    },
}
// 准备mutations--用于操作数据（state）
const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value);
        state.sum += value
    },
    JIAN(state,value){
        // console.log('mutations中的JIAN被调用了',state,value);
        state.sum -= value
    }
}
// 准备state--用于存储数据
const state = {
    sum:0//当前的和

}

// 创建store
const store = new Vuex.Store({
    // 对象中的key和保存对应值的变量重名，可以简写
    actions:actions,
    mutations,
    state
})

// 暴露store
export default store

/* 
    等同于
    export default new Vuex.Store({

    })
*/

搭建Vuex

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

//引入Vue核心库

        import Vue from 'vue'

        //引入Vuex

        import Vuex from 'vuex'

        //引用Vuex

        Vue. use(Vuex)



        const actions = {

            //响应组件中加的动作

            jia(context ,value){

                //console.log('actions中的jia被调用了',ministore,value)

                context.commit('JIA',value)

            },

        }



        const mutations = {

            //执行加

            JIA(state,value){

                // console.1og( 'mutations中的JIA被调用了',state,value)

                state.sum += value

            }

        }



        //初始化数据

        const state = {

            sum:0

        }



        //创建并暴露store

        export default new Vuex.Store({

            actions,

            mutations,

            state,

        })

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

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

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

Count.vue

<template>
    <div>
        <h1>当前求和为：{{$store.state.sum}}</h1>
        <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(){
                this.$store.commit('JIA',this.n)
            },
            decrement(){
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            },
        },
        /* mounted() {
            console.log('Count',this)
        }, */
    }
</script>

<style>
    button{
        margin-left: 5px;
    }
</style>

getters

5.getters的使用

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

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

const getters = {

            bigSum(state){

                return state.sum * 10

            }

        }

        //创建并暴露store

        export default new Vuex.Store({

            ....

            getters

        })

3.组件中读取数据:“$store.getters.bigSum

index.js中增加

// 准备getters--用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建store
const store = new Vuex.Store({
    // 对象中的key和保存对应值的变量重名，可以简写
    actions:actions,
    mutations,
    state,
    getters
})