Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
目录
文章目录隐藏
1. mapState 方法
用于帮助我们映射 state 中的数据为计算属性:
computed: { //借助 mapState 生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助 mapState 生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subject']), },
2. mapGetters 方法
用于帮助我们映射getters
中的数据为计算属性:
computed: { //借助 mapGetters 生成计算属性:bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助 mapGetters 生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum']) },
例子
不用mapState,mapGetters方法,原始写:
<template> <div> <h1>当前求和为:{{$store.state.sum}}</h1> <h3>当前求和放大 10 倍为:{{$store.getters.bigSum}}</h3> <h3>我在{{$store.state.school}},学习{{$store.state.subject}}</h3> </div> </template> <script> export default { name:'Count', } </script>
store/index.js:
//该文件用于创建 Vuex 中最为核心的 store import Vue from 'vue' //引入 Vuex import Vuex from 'vuex' //应用 Vuex 插件 Vue.use(Vuex) //准备 state——用于存储数据 const state = { sum:1, //当前的和 school:'尚硅谷', subject:'前端' } //准备 getters——用于将 state 中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } } //创建并暴露 store export default new Vuex.Store({ state, getters })
用 mapState,mapGetters 方法写
count.vue
<template> <div> <h1>当前求和为:{{sum}}</h1> <h3>当前求和放大 10 倍为:{{bigSum}}</h3> <h3>我在{{school}},学习{{subject}}</h3> </div> </template> <script> import {mapState,mapGetters} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, computed:{ //借助 mapState 生成计算属性,从 state 中读取数据。(对象写法) // ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助 mapState 生成计算属性,从 state 中读取数据。(数组写法) ...mapState(['sum','school','subject']), //借助 mapGetters 生成计算属性,从 getters 中读取数据。(对象写法) // ...mapGetters({bigSum:'bigSum'}) //借助 mapGetters 生成计算属性,从 getters 中读取数据。(数组写法) ...mapGetters(['bigSum']) }, } </script>
store/index.js
//该文件用于创建 Vuex 中最为核心的 store import Vue from 'vue' //引入 Vuex import Vuex from 'vuex' //应用 Vuex 插件 Vue.use(Vuex) //准备 state——用于存储数据 const state = { sum:1, //当前的和 school:'尚硅谷', subject:'前端' } //准备 getters——用于将 state 中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } } //创建并暴露 store export default new Vuex.Store({ state, getters })
3. mapActions 方法
用于帮助我们生成与actions
对话的方法,即:包含$store.dispatch(xxx)
的函数:
methods:{ //靠 mapActions 生成:incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠 mapActions 生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait']) }
4. mapMutations 方法
用于帮助我们生成与mutations
对话的方法,即:包含$store.commit(xxx)
的函数:
methods:{ //靠 mapActions 生成:incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠 mapActions 生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait']) }
例子:
不用 mapMutations,mapActions
store/index.js
//该文件用于创建 Vuex 中最为核心的 store import Vue from 'vue' //引入 Vuex import Vuex from 'vuex' //应用 Vuex 插件 Vue.use(Vuex) //准备 actions——用于响应组件中的动作 const actions = { jiaOdd(context,value){ console.log('actions 中的 jiaOdd 被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions 中的 jiaWait 被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) } } //准备 mutations——用于操作数据(state) const mutations = { JIA(state,value){ console.log('mutations 中的 JIA 被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations 中的 JIAN 被调用了') state.sum -= value } } //准备 state——用于存储数据 const state = { sum:1, //当前的和 } //创建并暴露 store export default new Vuex.Store({ actions, mutations, state, })
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) }, }, } </script> <style lang="css"> button{ margin-left: 5px; } </style>
用 mapMutations,mapActions
<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(n)">+</button> <button @click="decrement(n)">-</button> <button @click="incrementOdd(n)">当前求和为奇数再加</button> <button @click="incrementWait(n)">等一等再加</button> </div> </template> <script> import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, methods: { //借助 mapMutations 生成对应的方法,方法中会调用 commit 去联系 mutations(对象写法) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //借助 mapMutations 生成对应的方法,方法中会调用 commit 去联系 mutations(数组写法) // ...mapMutations(['JIA','JIAN']), /* ************************************************* */ //借助 mapActions 生成对应的方法,方法中会调用 dispatch 去联系 actions(对象写法) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //借助 mapActions 生成对应的方法,方法中会调用 dispatch 去联系 actions(数组写法) // ...mapActions(['jiaOdd','jiaWait']) }, } </script> <style lang="css"> button{ margin-left: 5px; } </style>
备注:mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
总代码
count.vue
<template> <div> <h1>当前求和为:{{sum}}</h1> <h3>当前求和放大 10 倍为:{{bigSum}}</h3> <h3>我在{{school}},学习{{subject}}</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(n)">+</button> <button @click="decrement(n)">-</button> <button @click="incrementOdd(n)">当前求和为奇数再加</button> <button @click="incrementWait(n)">等一等再加</button> </div> </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export default { name: 'Count', data() { return { n: 1, //用户选择的数字 } }, computed: { //借助 mapState 生成计算属性,从 state 中读取数据。(数组写法) ...mapState(['sum', 'school', 'subject']), //借助 mapGetters 生成计算属性,从 getters 中读取数据。(数组写法) ...mapGetters(['bigSum']) }, methods: { //借助 mapMutations 生成对应的方法,方法中会调用 commit 去联系 mutations(对象写法) ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }), //借助 mapActions 生成对应的方法,方法中会调用 dispatch 去联系 actions(对象写法) ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' }) }, mounted() { const x = mapState({ he: 'sum', xuexiao: 'school', xueke: 'subject' }) console.log(x) }, } </script> <style lang="css"> button { margin-left: 5px; } </style>
store/index.js
//该文件用于创建 Vuex 中最为核心的 store import Vue from 'vue' //引入 Vuex import Vuex from 'vuex' //应用 Vuex 插件 Vue.use(Vuex) //准备 actions——用于响应组件中的动作 const actions = { jiaOdd(context, value) { console.log('actions 中的 jiaOdd 被调用了') if (context.state.sum % 2) { context.commit('JIA', value) } }, jiaWait(context, value) { console.log('actions 中的 jiaWait 被调用了') setTimeout(() => { context.commit('JIA', value) }, 500) } } //准备 mutations——用于操作数据(state) const mutations = { JIA(state, value) { console.log('mutations 中的 JIA 被调用了') state.sum += value }, JIAN(state, value) { console.log('mutations 中的 JIAN 被调用了') state.sum -= value } } //准备 state——用于存储数据 const state = { sum: 0, //当前的和 school: '尚硅谷', subject: '前端' } //准备 getters——用于将 state 中的数据进行加工 const getters = { bigSum(state) { return state.sum * 10 } } //创建并暴露 store export default new Vuex.Store({ actions, mutations, state, getters })
App.vue
<template> <div> <Count /> </div> </template> <script> import Count from './components/Count' export default { name: 'App', components: { Count }, } </script>
main.js
//引入 Vue import Vue from 'vue' //引入 App import App from './App.vue' //引入插件 import vueResource from 'vue-resource' //引入 store import store from './store' //关闭 Vue 的生产提示 Vue.config.productionTip = false //使用插件 Vue.use(vueResource) //创建 vm new Vue({ el: '#app', render: h => h(App), store, beforeCreate() { Vue.prototype.$bus = this } })
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
码云笔记 » Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations