利用VUEX实现追加功能

一、首先我们要明白vuex是什么

• vuex是一个专门为vue.js应用程序开发的状态管理模式。

• vuex store

1. vuex中的核心模块 可以理解为一个仓库 或者说是一个存放数据的总部
2. store的特点 ：
   共享 组件与组件之间的数据都是共享的
   响应式
   创建一个store

二、vuex中的五个核心选项

• state：用来存放组件之间共享的数据，一般会在组件的计算属性中获取state的数据
• getters：可以看作是store的计算属性
• mutation：里面装着一些改变数据方法的集合，vuex就是把处理数据逻辑方法全部放在mutation里面，是同步操作

注意 vuex中改变store的唯一方法就是mutation

• action：是可以处理任何的异步操作

注意：action改变state里的值不能直接改变 要用在mutation里修改

三、下面开始实现简单的追加功能

首先要在state里面定义一个名为list的数据

  state: {
    list: [
      { id: 1, name: "西瓜" },
      { id: 2, name: "李子" },
    ],
  },

然后mutation里面同步提交方法

  mutations: {
    addFruits(state, val) {
      state.list.push(val);
    },
  },

action异步方法调用

• 这里的resolve代表着状态成功
• reject代表着失败状态
• 在这个异步方法里面返回一个promise函数

actions: {
    addFruitsAction({ commit }, val) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(200);
        }, 3000);
      });
      //   commit("addFruits", val);
    },
  },

以上是vuex里面的东西

页面中的内容

<template>
  <div>
     //v-model双向绑定输入框中的值
    <input type="text" v-model="inputvalue" placeholder="请输入水果名称" />
     //点击当前addFruitsFn函数，追加想要的数据
    <button @click="this.addFruitsFn">添加水果</button> 
     //循环渲染
    <div v-for="(v, i) in list" :key="v.id + i">
      <div>{{ v.name }}</div>
    </div>
  </div>
</template>


<script>
//引用mapState, mapMutations, mapActions这三个辅助函数
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return { inputvalue: "" };
  },
  methods: {
      //我们提交mutations里面的方法可以使用辅助函数mapMutations注册， 
      //也可以直接使用this.commit.addFruits来提交。 
    ...mapMutations(["addFruits", "user/changeName"]),
      //我们提交actions里面的方法可以使用辅助函数mapActions注册， 
      //也可以直接使用this.dispatch.addFruitsAction来提交。
    ...mapActions(["addFruitsAction", "user/changeNameAction"]),
    
    //调用函数
    addFruitsFn() {
      if (this.inputvalue === "") {
        return;
      }
      //定义数据
      let data = {
        id: this.list.length + 1,
        name: this.inputvalue,
      };
      this.addFruitsAction().then((res) => {
      //判断状态成功
        if (res == 200) {
           //追加数据
          this.addFruits(data);
          //输入框的值为空
          this.inputValue = "";
        }
      });
    },
    changeN() {
      this["user/changeNameAction"]();
    },
  },
  
  //在计算属性当中调取vuex中的数据
  computed: {
    ...mapState({
      list: (state) => state.list,
      userInfo: (state) => state.user.userInfo,
    }),
  },
};
</script>

这就实现了简单的追加功能

好啦！未来的精英工程师们，这次就先告一段落咯！

散会！！！