vuex状态管理模式(二)(getter,mutation)

Vuex

getter

  • 概述
    • 动机 :需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
    • 和计算属性一样,会缓存。
  • 使用
    • 通过属性访问:store.getters.xxx
    • 通过函数访问: 返回一个函数,来实现给 getter 传参。
    • mapGetters: 将 store 中的 getter 映射到局部计算属性。
示例

store/index.js

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        age:18,
    },
    getters:{
        // getters和计算属性一样,具有缓存效果
        tenYearsOld(state){
            // return this.$store.state.age + 10;
            return state.age + 10;
        }
    },
});
export default store;

组件CompA.vue

<template>
  <div id="app">
    {{age}}
    十年后的年龄:{{tenYearsOld}} 
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data(){
    return{
    }
  },
  computed: { 
    // age(){
    //   return this.$store.state.age
    // }
    // tenYearsOld(){
    //  return this.$store.state.age + 10;
    // }
     // 和上边一样
    ...mapState(["msg"]), 
    ...mapGetters(["tenYearsOld"]),
    // ...mapState('user', {
    //     user: state => state.info
    // })
  },
  mounted () {
    console.log(this.$store.state.age);
  },
</script>
<style></style>

mutation

  • 概述
    • 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    • 必须是同步的。方便追踪状态的改变。
  • 使用
    • 调用:store.commit("")
    • 提交载荷Payload 传参
    • mapMutation,扩展到 methods
示例一 mapMutations修改变量值
  • 组件调用改变state中的变量值。点击changeMsg按钮后,msg的值由Hi vuex变为xiao chen。

store/index.js

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        msg:"Hi vuex",
    },
    mutations:{
        changeMsg(state,payload){
            console.log(state);
            console.log(payload);
            state.msg="xiao chen"
        }
    },
});
export default store;

CompA.vue

<template>
  <div id="app">
    {{msg}}
    {{mymsg}}
    <button @click="changeMsg">changeMsg</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data(){
    return{
      
    }
  },
  computed: { 
    ...mapState(["msg"]),
    ...mapState({
      mymsg:"msg",
    }),
  },
  mounted () {
    console.log(this.$store.state.msg);
  },
  methods: {
    ...mapMutations(["changeMsg"]),
  },
}
</script>
<style></style>
示例二 this.$store.state修改变量值
methods: {
    handleMsg() {
      this.$store.state.msg = "xiao chen";
    }
}
示例三 this.$store.commit修改变量值
  • 提交载荷

store/index.js

mutations:{
    changeMsg(state,payload){
        console.log(state);
        console.log(payload);
        state.msg= payload;
    }
},

CompA.vue

 methods: { 
    handleMsg() {
      this.$store.commit("changeMsg","xiao chen");
    }
 }
示例四 不提交载荷

store/index.js

mutations:{
    changeMsg(state){
        console.log(state);
        state.msg= "xiao chen";
    }
},

CompA.vue

 methods: { 
    handleMsg() {
      this.$store.commit("changeMsg");
    }
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值