Vuex中mutations和actions属性-Vue-前端日记簿

首页 Vue 正文

Vuex中mutations和actions属性

2023-10-03 78

一 . Mutations修改属性

对数据进行修改时，我们可以通过mutations属性中进行操作，比如对数据进行删减

当我们对数据进行删除时给删除按钮增加一个点击事件将点击的列表id传过来

通过commit给 mutations中进行传参

在mutations中创建一个del函数从数据仓库中拿取数据源以及接收过来的值

进行一个遍历在遍历时我们判断找出数据仓库中跟传递过来相同ID

把它的索引赋值给k

然后通过数组中的splice进行删除

二 . Actions异步获取数据

这时我们的state数据源中的goods数组为空

可以通过在后端接口中获取参数并存入，我们可以通过vuex中提供的actions来进行获取

首先引入axios

然后在actions中写入一个函数通过axios来获取参数依旧通过commit的方式来进行数据传递

然后我们可以在mutations中接收到数据并将存入到state的goods数组当中

在根组件当中我们可以通过mounted来进行数据渲染到视图层

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vuex</title>
    <style>
      * {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 将俩个组件显示在根组件的视图层 -->
      <good-list></good-list>
    </div>
    <template id="menu-item">
      <div>
        <h3>商品总价：￥{{totalPrice}}</h3>
      </div>
    </template>

    <template id="menu-list">
      <div>
        <h1>我是menuList组件</h1>
        <table border="1">
          <tr>
            <th>商品id</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品总价</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in goods">
            <td>{{item.id}}</td>
            <td>{{item.goodname}}</td>
            <td>{{item.price}}</td>
            <td>{{item.num}}</td>
            <td>{{item.total}}</td>

            <td>
              <button @click="del(item.id)">删除</button>
            </td>
          </tr>
        </table>
        <good-total></good-total>
      </div>
    </template>
  </body>
</html>
<script src="../index.js/vue.js"></script>
<script src="../index.js/vuex.js"></script>
<script src="../index.js/axios.js"></script>
<script>
  let store = new Vuex.Store({
    //  state 公共数据 仓库中的数据中心
    // 作用：存数据
    state: {
      totalPrice: 0,
      goods: [],
    },
    // 获取数据的时候，如果 说 你 想在 获取的时候 对数据 进行 计算。
    getters: {
      getGoods(state) {
        let goods = state.goods;
        goods.forEach((value) => {
          value.total = value.price * value.num;
        });
        return goods;
      },
      getPrice(state) {
        let goods = state.goods;
        let t = state.totalPrice;
        goods.forEach((value) => {
          t += value.price * value.num;
        });
        return t;
      },
    },
    // 修改属性
    mutations: {
      del(state, id) {
        // id组件传递过来的参数
        // 自己仓库仓库中的数据源并进行处理
        console.log(state, id);
        let k;
        let goods = state.goods;
        goods.forEach((item, index) => {
          if (item.id == id) {
            // 找到需要删除的对象，把这一项的索引存起来
            k = index;
          }
        });
        goods.splice(k, 1);
      },
      setData(state, res) {
        state.goods = res.data.data;
      },
    },
    // 异步获取数据
    actions: {
      getGood(store) {
        let url = "../data/list.json";
        axios.get(url).then((res) => {
          store.commit("setData", res);
        });
      },
    },
  });
  let goodTotal = {
    template: "#menu-item",
    data() {
      return {};
    },
    computed: {
      // 自定义一个计算属性
      totalPrice() {
        return this.$store.getters.getPrice;
      },
    },
  };
  let goodList = {
    template: "#menu-list",
    data() {
      return {};
    },
    computed: {
      goods() {
        return this.$store.getters.getGoods;
      },
    },
    methods: {
      del(id) {
        console.log(id);
        // 把当前组件里面的id传给仓库
        this.$store.commit("del", id);
      },
    },
    components: {
      goodTotal,
    },
  };
  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    store,
    mounted() {
      this.$store.dispatch("getGood");
    },
    components: {
      goodList,
    },
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=65

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。