美文网首页
Vue中如何给$store.state动态赋值

Vue中如何给$store.state动态赋值

作者: IT飞牛 | 来源:发表于2019-10-12 10:33 被阅读0次

    我们在制作一个项目时,store中的state可能会有多个,如果给每个state做一个用于修改的方法,不免有点繁琐。下面定义个方法,可以动态修改对应的属性。

    export default {
        state: {
            menuList: [],
            queueList: {},
            components: {
                fileCopy: {
                    isShow: false
                },
                fileMove: {
                    isShow: false,
                    param: {
                        data: []
                    }
                },
                fileUpload: {
                    isShow: false
                },
                fileShare: {
                    isShow: false,
                    param: {
                        expiredDate: "",
                        password: "",
                        linkText: ""
                    }
                }
            },
            public: {
                data: [],//列表数据
                selected: []//选中项数据
            }
        },
    

    为了方便应用中修改state值,可以设置一个setData方法mutations

            setData(state, param) {//param:{key:*,val:*}
                var val = param.val;
                if (typeof param.val == "object") {
                    val = JSON.stringify(val);
                }
                eval(`state.${param.key}=${val}`);
            }
    

    调用:

    this.$store.commit("setData", {
      key: "components.fileMove.param.data",
      val: newValue
    });
    

    注:val值可能是object对象或者arr,故需要将JSON.stringify后,执行eval,否则会报错:

    image.png

    相关文章

      网友评论

          本文标题:Vue中如何给$store.state动态赋值

          本文链接:https://www.haomeiwen.com/subject/bgofmctx.html