1.actions解决异步：
store下index.js文件:
getters: {
/* 计算大专学历的数据 */
getDaZhuan: function (state) {
return state.list.filter(r => r.xueli == '大专')
},
/* 计算本科学历的数据 */
getBengKe: function (state) {
return state.list.filter(r => r.xueli == '本科')
},
/* 说明也具有缓存功能 如果state中的数据得到了改变
那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters
中的属性的值就不会发生改变*/
getRandom:function(state){
return state.num +'--'+ Math.random()
}
},
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations: {
/* 在mutations里面写异步就会造成数据混乱的问题 */
/* mutations 的方法最好大写,为了和actions方法做区分 */
/* mutations 通过payload来获取 */
ADDNUM: function (state, payload) {
console.log('ADDNUM', state);
/* 模拟后台获取数组的异步场景 */
/* setTimeout(()=>{
state.num+=payload
},500) */
/* state.num++ */
state.num += payload
},
DELNUM: function (state, payload) {
console.log('DELDNUM', state);
/* state.num-- */
state.num -= payload
},
},
/* actions是用来调后台接口的并commit提交一个mutations */
actions: {
/* actions里面的方法小写为了区分mutations里面的方法 */
/* 异步请求要放 actions 里面去写 不要放组件写*/
addajax: function ({
commit
}, data) {
setTimeout(() => {
/* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */
commit('ADDNUM', data)
}, 500)
},
delajax: function ({
commit
}, data) {
setTimeout(() => {
/* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */
commit('DELNUM', data)
}, 500)
},
},
/* 可以使用modules把vuex分模块 */
modules: {}
App.vue:
<p>
选择要加减的数量
<!-- v-model.number可以把字符串类型转成数字类型 -->
<select v-model="shuzi">
<!-- 使用v-bind也会解析成数字 -->
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
</p>
<button @click="add">增加</button> |
<button @click="del">减少</button>
data(){
return{
shuzi:1,
xueli:'大专',
value:0,
arr:this.$store.state.list
}
},
methods:{
/* 通过vuex方法实现了不同组件之间的数据共享 */
add(){
/* 利用commit传值给mutations */
/* this.$store.commit('ADDNUM',this.shuzi) */
/* 需要dispatch一个actions方法 */
this.$store.dispatch('addajax',this.shuzi)
},
del(){
/* this.$store.commit('DELNUM',this.shuzi) */
this.$store.dispatch('delajax',this.shuzi)
},
getR(){
console.log(this.$store.getters.getRandom);
},
}
},
2.getters分类展示:
store下index.js文件：
export default new Vuex.Store({
/* state是用来存储组件中的数据的 */
state: {
msg: '我是组件共享的数据',
num: 0,
list: [{
"title": "某xxxx去了学校1",
"dec": "xxxxxxx学习了vue学习了java",
"xueli": "大专"
},
{
"title": "某xxxx去了学校2",
"dec": "xxxxxxx学习了vue学习了javaScript",
"xueli": "大专"
},
{
"title": "某xxxx去了学校3",
"dec": "xxxxxxx学习了vue学习了云计算",
"xueli": "大专"
},
{
"title": "某xxxx去了学校4",
"dec": "xxxxxxx学习了vue学习了前端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校5",
"dec": "xxxxxxx学习了vue学习了后端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校6",
"dec": "xxxxxxx学习了vue学习了大数据",
"xueli": "本科"
}
]
},
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
getters: {
/* 计算大专学历的数据 */
getDaZhuan: function (state) {
return state.list.filter(r => r.xueli == '大专')
},
/* 计算本科学历的数据 */
getBengKe: function (state) {
return state.list.filter(r => r.xueli == '本科')
},
/* 说明也具有缓存功能 如果state中的数据得到了改变
那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters
中的属性的值就不会发生改变*/
getRandom:function(state){
return state.num +'--'+ Math.random()
}
},
App.vue:
<p>
选择要展示的学历
<select v-model="value" @change="changefn">
<option value="0">全部</option>
<option value="1">大专</option>
<option value="2">本科</option>
</select>
</p>
<table border="2">
<tr>
<th>标题</th>
<th>描述</th>
<th>学历</th>
</tr>
<tr v-for="(v,i) in list" :key="i">
<td>{{v.title}}</td>
<td>{{v.dec}}</td>
<td>{{v.xueli}}</td>
</tr>
</table>
第一种方法展示：
computed:{
list:function(){
/* value==0 展示全部 */
if(this.value==0){
return this.$store.state.list
}else if(this.value==1){
/* value 为1的通过getters的过滤展示大专数据 */
return this.$store.getters.getDaZhuan
}else if(this.value==2){
return this.$store.getters.getBengKe
}else{
/* 计算属性无论如何都需要返回一个值 */
return []
}
},
第二种方法展示：
methods:{
changefn(){
if(this.value==0){
this.arr = this.$store.state.list
}else if(this.value==1){
/* value为1通过getters的过滤展示大专数据 */
this.arr = this.$store.getters.getDaZhuan
}else if(this.value==2){
this.arr = this.$store.getters.getBenke
}
}
}
3.mapState和mapGetters：
import
导出vuex中的mapState方法
/* import {mapState} from 'vuex' */
/* import {mapState,mapGetters} from 'vuex' */
computed 计算属性里
computed:{
/* 等同于 list:function (){return[...]} */
/* ...mapState(['list']),
...mapGetters(['getDaZhuan','getBengke']) */
},
