以这种方式使用动作和突变更新 vuex 模块状态是错误的吗？

问题描述

我有一个关于操作和突变的问题。

我有一个带有以下路由的 Web API 的后端：getProducts（返回所有产品）和 addProduct、deleteProduct、updateProduct，它只返回成功或失败。

在前端，在特定模块状态下，我有兴趣保留所有产品的列表。

state.js：

export default () => ({
    products: [],});

接下来的方法有多大错？

我没有在 addProduct（将新产品推送到状态）、updateProduct（编辑状态）和 deleteProduct（拼接状态）操作上提交更改，而是用我已经添加/更新/删除的内容“刷新”我的状态在数据库中，调度 getProducts 操作，这是唯一一个提交突变的操作。

通过这种方式，我的状态始终与“单一事实来源”（数据库数据）保持同步，并且我还根据并发选项卡/计算机/浏览器请求保持状态保持最新。

actions.js：

  getProducts({commit}) {
        const route = `products/todo`;
        return axios.get(route)
            .then(response => {
                commit('SET_PRODUCTS',response.data);
            })
            .catch(err => {
                //....
            })
    },addProduct({dispatch},data) {
        const route = `products/todo`;
        return axios.post(route,data)
            .then((response) => {
                return dispatch('getProducts').then(() => {
                    //....
                })
            })
            .catch(err => {
               //...
            })

    },deleteProduct({dispatch},data) {
        const route = `products/todo`;
        return axios.delete(route)
            .then(() => {
                return dispatch('getProducts').then(() => {
                  //..........
                })
            })
            .catch(err => {
                //......
            })
    },updateProduct({dispatch},data) {
        const route = `products/todo`;
        return axios.put(route,data)
            .then(response => {
                return dispatch('getProducts').then(() => {
                  //...
                })
            })
            .catch(err => {
                //...
            })
    },//mutations.js

export default {
    SET_PRODUCTS: (state,data) => {
        state.products = data;
    },}

这是一种错误的方法吗？如果我选择编写这样的操作和突变，我是否会错误地使用 VUEX 的状态管理？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）