Vuex辅助函数 mapState, mapGetters, mapMutations, mapActions的使用

最新推荐文章于 2023-01-13 18:06:59 发布

坏人OvO

最新推荐文章于 2023-01-13 18:06:59 发布

阅读量449

点赞数

分类专栏： vuex 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/MM_520131400/article/details/122239280

版权

vuex 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、在store 创建 home.js

const state = {
  bookList: ["西游记", "水浒传", "红楼梦", "三国演义"],
  num: 2
};
const getters = {
  num: state => state.num * 2,
  nums: state => state.num * 3
};
const mutations = {
  SET_LIST: (state, list) => {
    state.bookList = list;
  }
};

const actions = {
  //方式一
  Action: (context, data) => {
    context.commit("SET_LIST", data);
  }
  //方式二
  // Action1({ commit }, data) {
  //   commit("SET_LIST", data);
  // }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

二、页面使用

<template>
  <div class="home">
    {{bookList}}
    <p>{{num}}</p>
    <p>{{nums}}</p>
    <button @click="handlePush()">点击变换</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      list: ["哲学", "生活", "自律", "三体"]
    }
  },
 computed: {
    //方式一
    // ...mapState({
    //   bookList: state => state.home.bookList
    // }),
    //方式二
    ...mapState("home", ["bookList"]),


    //方式一
    ...mapGetters("home", ["num", "nums"]),
    //方式二
    // ...mapGetters("home", {
    //   num: "num",
    //   nums: "nums"
    // })
  },
  methods: {
    //方式一
    // ...mapMutations({
    //   SET_LIST: "home/SET_LIST"
    // }),
    //方式二
    ...mapMutations("home", ["SET_LIST"]),
    //方式一
    // ...mapActions({
    //   Action: "home/Action"
    // }),
    //方式二
    ...mapActions("home", ["Action"]),

    handlePush () {
      // this.SET_LIST(this.list)
      this.Action(this.list)
    }
  },
}
</script>