Vuex简单添加数据功能

利用Vuex实现添加数据功能

什么是Vuex呢？它的作用是什么呢？它能实现怎么样的功能呢？

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

vuex是一个专门为vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
详情可见下方的官网：
Vuex官网 <<<

- Vue store

1. Vuex中的核心模块 可以理解为一个仓库 或者说是一个存放数据的总部。

2. store的特点 ：
   共享 组件与组件之间的数据都是共享的
   响应式
   创建一个store

二、Vuex中的五个核心选项

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

注意： Vuex中改变store的唯一方法就是mutations

4. actions：是可以处理任何的异步操作

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

5. Modules：使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

三、下面我们就可以实现添加数据功能

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

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

2. 然后mutation里面同步提交方法

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

3. actions异步方法调用

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

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

以上就是store.js里的内容

下面是页面中的内容

<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>

这样就实现了简单的Vuex简单的添加数据功能

OK！！！未来的精英工程师们，这次先告一段落