我有几个组件,都需要用到vuex.store,而且这几个组件结构极其类似,就在想,能不能复用store的对象定义?因为每个组件都定义一遍,繁琐,且没必要。

主要是用到克隆组件。具体代码如下:

1)共用的store定义

/src/store/common.js

export default {
namespaced: true,
state: {
v: "hello store", // for test
items: [],
},
getters: {
v: (state) => state.v,
items: (state) => {
return state.items;
},
},
mutations: {
// 同步操作
setV(state,) {
state.v = val;
},
setItems(state,) {
state.items = val;
},
},
actions: {
keepItems: ({ commit },) => {
commit("setItems", val);
},
},
};

2)组件1

/src/store/component1.js

import cloneDeep from "lodash/cloneDeep";
import common from "./common";

const category = cloneDeep(common);

export default component1;

3)组件2
/src/store/component2.js

import cloneDeep from "lodash/cloneDeep";
import common from "./common";

const category = cloneDeep(common);

export default component2;