Separate instances of Vuex store clash each other when working across separate Vue instances
I am currently learning/prototyping vue.js and vuex (using plain js, at the moment). I am trying to accomplish following:
- create multiple vue instances having their own vuex stores independent to each other. Right now, I am storing only ajax status/progress in vuex store and improve it gradually.
- vue instances can come from same vue definition (template, methods etc.), but need to work with different vuex store instances.
- vuex stores should not know about each other (no clashes) and should only work exclusively with their respective vue instance counter parts.
I almost achieved the above as shown below:
index.html - https://gist.github.com/guywithdoubts/2f64346929a3d8adec79a1cd927e39a8
app.html (template) - https://gist.github.com/guywithdoubts/c09298a8e593705d73f19bf8427cfcf7
app.js (vue def. 1) - https://gist.github.com/guywithdoubts/66b99fabe1d1a3f15c18914b8cf64e6d
app2.js (vue def. 2) - https://gist.github.com/guywithdoubts/bda070fdebfcc8756ce80ead6e5dcd09
Theoritically, we can just create one class out of app.js and app2.js (identical code). But, just to test/troubleshoot things, I separated them.
I am able to pull data and everything seems working fine. if I hit refresh button in second instance, I get the following log (which is perfect, as everything is happening in app2 related store):
But, if I hit refresh button in first instance, I get the following log:
The first vue instance (from app.js) is working/clashing with vuex store related to second vue instance (from app2.js).
I am not sure on where I am going wrong on this. Any help is well appreciated.
vuejs2 vuex
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
add a comment |
I am currently learning/prototyping vue.js and vuex (using plain js, at the moment). I am trying to accomplish following:
- create multiple vue instances having their own vuex stores independent to each other. Right now, I am storing only ajax status/progress in vuex store and improve it gradually.
- vue instances can come from same vue definition (template, methods etc.), but need to work with different vuex store instances.
- vuex stores should not know about each other (no clashes) and should only work exclusively with their respective vue instance counter parts.
I almost achieved the above as shown below:
index.html - https://gist.github.com/guywithdoubts/2f64346929a3d8adec79a1cd927e39a8
app.html (template) - https://gist.github.com/guywithdoubts/c09298a8e593705d73f19bf8427cfcf7
app.js (vue def. 1) - https://gist.github.com/guywithdoubts/66b99fabe1d1a3f15c18914b8cf64e6d
app2.js (vue def. 2) - https://gist.github.com/guywithdoubts/bda070fdebfcc8756ce80ead6e5dcd09
Theoritically, we can just create one class out of app.js and app2.js (identical code). But, just to test/troubleshoot things, I separated them.
I am able to pull data and everything seems working fine. if I hit refresh button in second instance, I get the following log (which is perfect, as everything is happening in app2 related store):
But, if I hit refresh button in first instance, I get the following log:
The first vue instance (from app.js) is working/clashing with vuex store related to second vue instance (from app2.js).
I am not sure on where I am going wrong on this. Any help is well appreciated.
vuejs2 vuex
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the sameindex.html?
– Simon Hyll
Nov 28 '18 at 21:39
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02
add a comment |
I am currently learning/prototyping vue.js and vuex (using plain js, at the moment). I am trying to accomplish following:
- create multiple vue instances having their own vuex stores independent to each other. Right now, I am storing only ajax status/progress in vuex store and improve it gradually.
- vue instances can come from same vue definition (template, methods etc.), but need to work with different vuex store instances.
- vuex stores should not know about each other (no clashes) and should only work exclusively with their respective vue instance counter parts.
I almost achieved the above as shown below:
index.html - https://gist.github.com/guywithdoubts/2f64346929a3d8adec79a1cd927e39a8
app.html (template) - https://gist.github.com/guywithdoubts/c09298a8e593705d73f19bf8427cfcf7
app.js (vue def. 1) - https://gist.github.com/guywithdoubts/66b99fabe1d1a3f15c18914b8cf64e6d
app2.js (vue def. 2) - https://gist.github.com/guywithdoubts/bda070fdebfcc8756ce80ead6e5dcd09
Theoritically, we can just create one class out of app.js and app2.js (identical code). But, just to test/troubleshoot things, I separated them.
I am able to pull data and everything seems working fine. if I hit refresh button in second instance, I get the following log (which is perfect, as everything is happening in app2 related store):
But, if I hit refresh button in first instance, I get the following log:
The first vue instance (from app.js) is working/clashing with vuex store related to second vue instance (from app2.js).
I am not sure on where I am going wrong on this. Any help is well appreciated.
vuejs2 vuex
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
I am currently learning/prototyping vue.js and vuex (using plain js, at the moment). I am trying to accomplish following:
- create multiple vue instances having their own vuex stores independent to each other. Right now, I am storing only ajax status/progress in vuex store and improve it gradually.
- vue instances can come from same vue definition (template, methods etc.), but need to work with different vuex store instances.
- vuex stores should not know about each other (no clashes) and should only work exclusively with their respective vue instance counter parts.
I almost achieved the above as shown below:
index.html - https://gist.github.com/guywithdoubts/2f64346929a3d8adec79a1cd927e39a8
app.html (template) - https://gist.github.com/guywithdoubts/c09298a8e593705d73f19bf8427cfcf7
app.js (vue def. 1) - https://gist.github.com/guywithdoubts/66b99fabe1d1a3f15c18914b8cf64e6d
app2.js (vue def. 2) - https://gist.github.com/guywithdoubts/bda070fdebfcc8756ce80ead6e5dcd09
Theoritically, we can just create one class out of app.js and app2.js (identical code). But, just to test/troubleshoot things, I separated them.
I am able to pull data and everything seems working fine. if I hit refresh button in second instance, I get the following log (which is perfect, as everything is happening in app2 related store):
But, if I hit refresh button in first instance, I get the following log:
The first vue instance (from app.js) is working/clashing with vuex store related to second vue instance (from app2.js).
I am not sure on where I am going wrong on this. Any help is well appreciated.
vuejs2 vuex
vuejs2 vuex
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
asked Nov 28 '18 at 15:25
user203687user203687
3,51174269
3,51174269
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the sameindex.html?
– Simon Hyll
Nov 28 '18 at 21:39
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02
add a comment |
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the sameindex.html?
– Simon Hyll
Nov 28 '18 at 21:39
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the same
index.html?– Simon Hyll
Nov 28 '18 at 21:39
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the same
index.html?– Simon Hyll
Nov 28 '18 at 21:39
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53522844%2fseparate-instances-of-vuex-store-clash-each-other-when-working-across-separate-v%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53522844%2fseparate-instances-of-vuex-store-clash-each-other-when-working-across-separate-v%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
ever heared about vuex modules? vuex.vuejs.org/api/#modules
– Efrat
Nov 28 '18 at 16:00
heard about that. But not sure if it is going to work in my case (as it is like two different apps without one knowing about other)
– user203687
Nov 28 '18 at 16:08
jsfiddle here: jsfiddle.net/9rLp5t4s
– user203687
Nov 28 '18 at 16:10
I don't get what the use case for this is. Why do you want multiple Vue instances to act on the same
index.html?– Simon Hyll
Nov 28 '18 at 21:39
Why not. We can use the same template for multiple Vue instances. That's how I see in documentation. It's a kind of reusing same template for multiple component instances. Let me if I am mistaken
– user203687
Dec 18 '18 at 18:02