На объектах, которые я создаю без vuex store это работает
https://codesandbox.io/s/vigorous-lake-k5u8p?file=...
let original = {
foo: 'original',
bar: {
a: 1,
b: 2
}
};
let clone = {};
for (let key in original) {
clone[key] = original[key];
}
clone.foo = 'clone';
console.log( original );
console.log( clone );
С vuex store не работает
https://jsfiddle.net/84j5bfg9/2/
<div id="app1">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
// make sure to call Vue.use(Vuex) if using a module system
let original = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
// 1
let clone = {};
for (let key in original) {
clone[key] = original[key];
}
/*
// 2
var clone = Object.assign({}, original);
*/
console.log( original.state.count );
console.log( clone.state.count );
new Vue({
el: '#app1',
computed: {
count () {
return clone.state.count
}
},
methods: {
increment () {
clone.commit('increment')
},
decrement () {
clone.commit('decrement')
}
}
})
Ну и когда я подключаю lodash.cloneDeep() получаю
Uncaught TypeError: Cannot convert a Symbol value to a string
import Vue from 'vue';
import Vuex from 'vuex';
import VueLodash from 'vue-lodash';
import lodash from 'lodash';
Vue.use(Vuex);
Vue.use(VueLodash, { lodash: lodash });
import App from '../components/copy-calculator/Index.vue';
import myApp from '../store/modules/myApp/myApp';
const store = new Vuex.Store({
modules: { myApp }
});
// Это работает
// let data = [
// { id: 1, values: { a: 'a', b: 'b' } },
// { id: 2, values: { c: 'c', d: 'd' } }
// ];
// let clone = lodash.cloneDeep(data);
// console.log(clone);
const appInstances = document.querySelectorAll('.myApp');
appInstances.forEach((appInstance)=>{
// Это уже не работает
let clone = lodash.cloneDeep(store);
new Vue({
el: `#myApp_${ appInstance.dataset.id}`,
clone,
components: { App },
});
});
Простой