artloveyou
@artloveyou

Возможно ли создать копию store для одного и того же компонента с разными id?

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import App from '../components/my-app/Index.vue';
import thisStore from '../store/modules/thisStore/thisStore';

const appInstances = document.querySelectorAll('.appInstance');

appInstances.forEach((appInstance)=>{

    // так оба экземпляра один стор юзают
    const store = new Vuex.Store({
        modules: { thisStore }
    });

    new Vue({
        el: `#thisApp_${  appInstance.dataset.id}`,
        store,
        components: { App },
    });

});

<app class="appInstance" data-id="1" id="thisApp_1"></app>
<app class="appInstance" data-id="2" id="thisApp_2"></app>
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 2
nuykon
@nuykon
Full Stack Developer
Возможно :)

"// так оба экземпляра один стор юзают", потому что тут - modules: { thisStore } - передается ссылка на модуль/объект(а не новый/другой модуль/объект)

вы ссылаетесь на thisStore(он у вас один) во всех инстансах
Ответ написан
artloveyou
@artloveyou Автор вопроса
На объектах, которые я создаю без 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 },
    });

});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы