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

参考：Vue中如何给$store.state动态赋值 - 简书

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

正在上传…重新上传取消

IT飞牛关注

0.0722019.10.12 10:33:50字数 123阅读 7,292

我们在制作一个项目时，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