这里通过一个实例,来描述vuex的mapState , mapGetters , mapActions
这里使用 Element UI 官网地址:http://element-cn.eleme.io/#/zh-CN/component/select
一、使用 Element UI 给出的demo,选择其一拷贝到本地项目
二、修改demo,得到如下:
<div>
<span>测试vuex</span>
<template>
<el-select v-model="optionValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.name"
:label="item.name"
:value="item.age">
</el-option>
</el-select>
</template>
</div>
optionValue是当前选中的值,options是所有下拉值的集合,这里是数组格式
三、js代码内引用vuex,methods内声明需要的mapActions ,computed内声明需要使用的mapState 和 mapGetters
<script>
import { mapGetters, mapState,mapActions } from 'vuex'
......
methods: {
...mapActions('cache', ['updatePeople']),
......
computed:{
author(){
return this.$store.state.author
},
...mapGetters('cache', ['avaliableMan']),
...mapState('cache', {
allPeople: state => state.people
}),
}
mapActions 声明调用哪个模块文件,以及使用这个文件内的哪个action
mapState 声明调用哪个模块文件,以及使用这个文件内的哪个state
mapGetters 声明调用哪个模块文件,以及使用这个文件内的哪个getter
注:模块文件,用词可能不太准确,指 store 的各个子文件,意会即可
四、将 store 模块化,即上方提到的调用哪个模块文件
store.js
/*
Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,
可以把 store 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。
*/
import Vue from 'vue'
import Vuex from 'vuex'
//可以把store根据功能模块进行分割
import cache from './modules/cache'
Vue.use(Vuex)
const store = new Vuex.Store({
//声明分割的模块
modules:{
cache
},
// 定义状态
state: {
},
mutations:{
},
actions: {
}
})
export default store
cache.js
export default {
//开启,调用时加模块名,例如...mapGetters('cache', ['avaliableMan']) 的cache即模块名字
namespaced: true,
state: {
people:[]
},
//getter内的方法以state作为参数,即上方定义的属性都可以操作
getters:{
//filter过滤,例如这里过滤了people的值,getter方法将得到过滤结果为true的值
avaliableMan (state) {
return state.people.filter(item => {
return item.sex === '1'
})
},
avaliableWoman (state) {
return state.people.filter(item => {
return item.sex === '0'
})
},
//添加过滤条件,这里为性别,可以用来完成级联查询
filterSex: state => (sex) => {
if (!sex) {
return state.people.filter(item => {
return true
})
} else {
return state.people.filter(item => {
return item.sex == sex
})
}
}
},
//只能在这里改变state数据
mutations: {
setPeople (state, data) {
state.people = data
}
},
actions: {
initCache ({commit, dispatch}) {
// 查询测试用户
dispatch('updatePeople')
},
updatePeople ({commit}) {
// 可以使用ajax获取缓存数据,这里仅为测试,使用静态数据
let result={
people:[
{name:'张三',age:'20',sex:'1'},
{name:'李四',age:'22',sex:'0'},
{name:'王五',age:'21',sex:'1'}
]
}
//使用 store 内置的 commit 来提交到 mutations 内的方法,达到修改数据的目的。前者为方法名,后者为数据参数
commit('setPeople', result.people)
},
}
}
前者为主文件,后者为各个子模块的示例代码
五、使用,测试
在 methods 内加赋值方法
getOption:function () {
// this.options=this.allPeople
// this.options=this.avaliableMan
this.options=this.filterSex('0')
}
在 mounted 内调用对应方法,用于初始化
mounted(){
this.updatePeople()
this.getOption()
}
这样整体流程即,加载页面至 mounted 环节,调用updatePeople方法获取 cache模块的 people 属性值,调用getOption方法将值赋给 options 用来展示下拉数据。在getOption内可以指定是使用原state数据,还是过滤后的state数据。