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");
    }
 }