logo
down
shadow

Importing store into a lib.js while using vuex with SSR


Importing store into a lib.js while using vuex with SSR

By : Sanjit Sahu Sanjit
Date : November 19 2020, 03:01 PM
it helps some times Your file at @/store/index.js is exporting a factory function. It makes Vuex stores. You will want to export the store instance that you created in @/app.js
code :
// A singleton Vuex store
export var store

// Expose a factory function that creates a fresh set of store, router,
// app instances on each call (which is called for each SSR request)
export function createApp () {
  // create store and router instances
  const router = createRouter()

  if (!store) store = createStore()

  // sync the router with the vuex store.
  // this registers `store.state.route`
  sync(store, router)

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return { app, router, store }
}


Share : facebook icon twitter icon
Can't access $store when importing Vuex instance from an external file

Can't access $store when importing Vuex instance from an external file


By : Alice Sadogursky
Date : March 29 2020, 07:55 AM
Does that help I'm creating a counter using Vue & Vuex 2. , You have imported vue differently:
code :
import Vue from 'Vue'
import Vue from 'vue'
import Vue from 'vue'
import Vuex from 'Vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  }
});
unexpected token error importing a vuex store to laravel page

unexpected token error importing a vuex store to laravel page


By : Brad T
Date : March 29 2020, 07:55 AM
I wish this helpful for you New-ish to Vue nd extremely new to Vuex. Im trying to import a store to my main page from which all my components branch out, but I keep getting an "unexpected token {" error in the browser console. I read through the documentation, but I cant find anything that would address this issue. I have tried changing every bit of syntax I can, and it doesnt seem to make a difference. The brackets around store in the import appear to be the problem, but when I remove them, i just get a new "unexpected identifier", or an "unexpected string" error. Am I importing it incorrectly? This format works fine on all my components, just not on this new vue instance. , Per comments:
code :
import { store } from './../stores/store1.js';
<script src="./../stores/store1.js"></script>
export const store = new Vuex.Store({
window.store = new Vuex.Store({
Vuex store modules not loading in right order when importing store directly

Vuex store modules not loading in right order when importing store directly


By : tbafa
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Sigh, sorry. Circular dependency indeed. Was expecting a warning if I'd did that, but didn't.
Emile Bergeron.
Importing Vuex Plugins without defining a Store

Importing Vuex Plugins without defining a Store


By : user1886277
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , so one of my store modules looks like this , You just need to mention it once in your store/index.js:
code :
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import createPersistedState from 'vuex-persistedstate'
import posts from '~/store/posts.store'

....

export default new Vuex.Store({
  state:     { ... },
  mutations: { ... },
  actions: { ... }, 
  modules: { 
    posts,
    ... 
  },
  plugins: [createPersistedState()]
})
const state = () => ({ ... })
const getters = { ... }
const mutations = { ... }
const actions = { ... }
export default { namespaced: true, state, getters, actions, mutations }    
Getting this error in nuxt: [vuex] do not mutate vuex store state outside mutation handlers

Getting this error in nuxt: [vuex] do not mutate vuex store state outside mutation handlers


By : Bathabile Mathabatha
Date : March 29 2020, 07:55 AM
This might help you You are directly setting the component data as Vuex state, and this causes problem because when you modify the component data you also directly mutate the state outside the mutation handlers. A quick fix is to clone this object before assigning it as a vuex state:
code :
this.$store.commit('setCurrentSongTime', JSON.parse(JSON.stringify(this.currentSongTime)));
Related Posts Related Posts :
  • How can I put toast messages in a separate file when unsing Vue.js
  • Why must vue component data be a function?
  • How can I make in array in vue component?
  • vueJS hide element in dynamic table row
  • Vue-router: beforeEnter guard doesn’t work properly for children path
  • Remove listing from Vuejs1 vs Vuejs2
  • Difference between .$mount() and el [Vue JS]
  • How to display card components in loop with Vuetify grid system?
  • Execute custom functions one after another - Callback logic in Vue.js
  • Vue.js: how to display the <br> element from the data property
  • Chain requests to the server in Vue.js
  • Vue.js - data in component instead of a generated modal
  • Create a div using vue.js
  • Cannot read property 'property_name' of undefined
  • Vue.js cycle does not work
  • Vue.js change placeholder of text input according to v-model value
  • ViewBag.Title from Vue router
  • VueJS GET request with Bearer token
  • Wait for multiple images to load
  • How to resize the image in vue
  • v-html with conditional rendered
  • Vuetify v-flex width specifications
  • Vuetify / Offline icons
  • How to add Matomo tracking code in VueJS Single Page Apps?
  • Access vue js data with axios post form symfony
  • Using paperjs on a vuejs project based on SFC
  • Vue Component prop in vuetify component
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org