博客

vuex学习

  • Post author:
  • Post category:vue


1.vuex中的getters配置项

src/Count.vue 

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和的10倍为：{{$store.getters.bigSum}}</h3>
		<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('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

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

src/store/index.js 

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
const actions = {
    // jia(context, value) {
    //     // console.log('actions中的jia被调用了', context, value)
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     context.commit('JIAN', value)

    // },
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)

    }
}
const mutations = {
    JIA(state, value) {
        // console.log('mutations被调用了', a, b)
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    }
}
const state = {
    sum: 0,
    school: '尚硅谷',
    subject: '前端'
}
// 准备getters--用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

效果：

从而实现将当前结果扩大十倍

总结： getters配置项的使用，当state中的数据需要经过加工在使用时，可以使用getters加工，组件中读取数据$store.getters,bigSum

2.四个map方法的使用

2.1 mapState和mapGetters

src/store/index.js 

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
const actions = {
    // jia(context, value) {
    //     // console.log('actions中的jia被调用了', context, value)
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     context.commit('JIAN', value)

    // },
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)

    }
}
const mutations = {
    JIA(state, value) {
        // console.log('mutations被调用了', a, b)
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    }
}
const state = {
    sum: 0,
    school: '尚硅谷',
    subject: '前端'
}
// 准备getters--用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

src/components/Count.vue 

 computed: {
        // 程序员需要自己动手写这段代码
        // 借助mapState生成计算属性，从state中读取数据(对象写法)
        // ...mapState({ he: 'sum', xuexiao: 'school', xueke: 'subject' })
        // 借助mapState生成计算属性，从state中读取数据(数组写法)（要求计算属性名和读取的数据名要保持一致）
        ...mapState(['sum', 'school', 'subject']),
        // ...mapGetters({ bigSum: 'bigSum' }),
        ...mapGetters(['bigSum'])
    },

总结：

  1. mapState方法：用于帮助我们映射state中的数据，主要有两种写法：对象写法和数组写法
  2. mapGetters方法：用于帮助我们映射getters中的数据，也有两种写法：同上

2.2 mapActions和mapMutations

src/components/Count.vue 

 methods: {
        // increment() {
        //     this.$store.commit('JIA', this.n)
        // },
        // decrement() {
        //     this.$store.commit('JIAN', this.n)

        // },
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
        // incrementOdd() {

        //     this.$store.dispatch('jiaOdd', this.n)

        // },
        // incrementWait() {
        //     this.$store.dispatch('jiaWait', this.n)

        // }
        // 借助mapActions生成对应的方法，方法中会调用dispitch去联系（对象写法）
        ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })
    },

总结：

  1. mapActions方法：用于能帮助我们生成与actions对话的方法，即：$store.dispatch()函数
  2. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：$store.commit(）函数


注意：

mapActions

与

mapMutations

使用时，若需要传递参数，则需要在模板中绑定事件时传递好参数，否则参数是事件对象

3.对组件共享数据

组件基本结构如下：

src/App.vue 

<template>
    <div class="container">
        <Count></Count>
        <Person></Person>
    </div>
</template>
<script>
import Count from './components/Count.vue';
import Person from './components/Person.vue';
export default {
    name: 'App',
    components: { Count, Person },

}
</script>

src/components/Person.vue 

<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color:red">上方的求和结果为：{{ sum }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="add">添加</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{ p.name }}</li>

        </ul>
    </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { mapState } from 'vuex'
export default {
    name: 'Person',
    data() {
        return {
            name: ''
        }
    },
    computed: {
        // personList() {
        //     return this.$store.state.personList
        // },
        // sum() {
        //     return this.$store.state.sum
        // }
        ...mapState(['personList', 'sum'])
    },
    methods: {
        add() {
            const personObj = { id: nanoid(), name: this.name }
            this.$store.commit('ADD_PERSON', personObj)
            this.name = ''
        }
    }
}
</script>
<style>

</style>

src/store/index.js 

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
const actions = {
    // jia(context, value) {
    //     // console.log('actions中的jia被调用了', context, value)
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     context.commit('JIAN', value)

    // },
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)

    }
}
const mutations = {
    JIA(state, value) {
        // console.log('mutations被调用了', a, b)
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        state.personList.unshift(value)

    }
}
const state = {
    sum: 0,
    school: '尚硅谷',
    subject: '前端',
    personList: [
        { id: '001', name: '张三' }
    ]
}
// 准备getters--用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

效果如下：

实现让Count和Person组件都共同使用state中的sum和personList

4.模块化和命名空间

模块化是为了使代码具有可读性，让多种数据分类更加明确，


开启namespaced: true,

 

// 求和相关的配置
const countOptions = {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    },
    mutations: {
        JIA(state, value) {
            // console.log('mutations被调用了', a, b)
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
// 人员管理相关配置
const personOptions = {
    namespaced: true,
    actions: {

    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {

    }
}

export default new Vuex.Store({
    modules: {
        a: countOptions,
        b: personOptions
    }
})

效果：

将代码分块管理：

src/store/index.js 

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'

import countOptions from './count'

import personOptions from './person'
// 使用vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        a: countOptions,
        b: personOptions
    }
})

src/store/count.js 

export default {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    },
    mutations: {
        JIA(state, value) {
            // console.log('mutations被调用了', a, b)
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

src/store/person.js 

import axios from 'axios'
import { nanoid } from 'nanoid'
// 人员管理相关配置
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context) {
            axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}

效果：


版权声明：本文为qq_50280292原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。