vue基础 - 12 （vuex：getters计算属性、actions异步方法、modules模块）

1、getters：计算属性

       1.1 书写： 函数名（state）{ return  state.xxx…   }

                store/index.js

export default new Vuex.Store({
  getters: {
    // 获取 num 的 双倍 double
    num_double(state) {
      // 函数必定带 state 参数, 代表共享的state
      return state.num * 2;
    },
  },
});

       1.2 使用：

              ① 直接使用：this. $store.getters.num_double

              ② 引入 import { mapGetters } from "vuex"

                  生成计算属性：computed: {  ...mapGetters(["num_double"]), }

<template>
  <div>
    <div>{{ $store.getters.num_double }}</div>
    <div>{{ num_double }}</div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["num_double"]),
  },
};
</script>

 2、actions：存放方法: 异步方法 -- axios 网络请求

          先在store/index.js引入axios：import axios from "axios";

          ① 登录操作：

        书写：在store/index.js中

export default new Vuex.Store({
  actions: {
    //登录操作, 返回promise:  封装异步请求的函数在这里
    doLogin({ commit }, payload) {
      // 不需要在这里更新什么, 所以参数1 没有实际用途
      let url = "user_login.php";
      return new Promise((resolve, reject) => {
        axios
          .post(url, payload)
          .then((result) => {
            resolve(result);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
});

   调用：

import { mapMutations } from "vuex";
.....

methods: {
    ...mapActions(["doLogin"]),
    login() {
      let params = "unameOrPhone=doudou&upwd=123456";
      // 组件中不用调用axios, 而是把请求操作封装到了 vuex 中, 统一所有组件 发送请求的代码位置
      var res = this.doLogin(params);
      console.log(res);
      res.then((res) => {
        console.log(res);
      });
    },    
   },

  ② 网络请求，获取产品详情，并将请求的数据存放在state中

    书写：在store/index.js中

export default new Vuex.Store({
  // 存储在这里的变量, 可以全局所有组件共享使用
  state: {
    products: null,
  },
  // 更新state中的值, 方法必须放此处
  mutations: {
    updateProducts(state, products) {
      state.products = products;
    },
  },
  actions: {
    // 以前发请求: this.axios
    // 当前文件的 this 代表 vuex 对象, 不是 vue 对象
    // 参数1 是个对象类型, 通常解构之后使用
    getProducts({ commit }, payload) {
      // 参数1: 固定的context, 代表当前的 vuex 对象
      // console.log("context:", context);
      // 参数2: 随意, 根据实际需求填写即可
      let url = "cart_detail_select.php?uid=" + payload;

      axios
        .get(url)
        .then((res) => {
          console.log(res);
          //成功后, 需要把请求的值存储到 state中的 products 变量里
          // 更新变量必须通过 mutations中的方法来进行
          // 利用commit 调用
          // context.commit("updateProducts", res.data.products);
          // 利用解构语法, 从参数1中 解构出 commit, 然后使用 代码可以更加简单
          commit("updateProducts", res.data.products);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

});

3、modules：分模块: 当项目较大的时候, vuex 中如果还集成网络请求, 则代码量会非常大, 此时必须拆分

             ① 创建store/user.js

export const module_user = {
  state: {
    uname: "丫丫",
    uage: 33,
  },
  getters: {
    uage_double(state) {
      return state.uage * 2;
    },
  },
  mutations: {
    updateUage(state, uage) {
      state.uage = uage;
    },
  },
  actions: {},
  moudles: {},
};

        ② store/index.js中导入

export default new Vuex.Store({
  modules: {
    user: module_user,
  },
});

       ③调用模块user中的state和getter

        直接调用

      <div>{{ $store.state.user.uname }}</div>
      <div>{{ $store.state.user.uage }}</div>
      <!-- 模块中的计算属性 uage_double -->
      <div>{{ $store.getters.uage_double }}</div>

        引入、注册

<template>
  <div>
    <div>
      <div>{{ user.uname }}</div>
      <div>{{ user.uage }}</div>
      <!-- 模块中的计算属性 uage_double -->
      <div>{{ uage_double }}</div>
    </div>
  </div>
</template>

<script>
import { mapState,  mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["uage_double"]),
  },
};
</script>