Vuex: Usage with vue-router

[egonyans]

It is pretty clear how to use the Vuex with single page app with only one active view.
But how do I manage states in more complex app with different views?
Should I override v-link behavior and run a mutation to change the view?

It would be awesome if you could provide an example for this case, thanks!

[yyx990803]

Yes, will come up with an example using router and vuex together later.

[fallenpeace]

+1, should the mutation override the current views state? I'm learning towards "no".

[lluvio]

+1

[kamalakarchagam]

+1

[jonagoldman]

+1

[fobdy]

+1

[qigx]

+1

[jondcallahan]

👍

[zhangzan]

+1

[sipte]

I am following https://github.com/moe-szyslak/Lily by @moe-szyslak and the shopping cart example, both seems to be giving good inputs on how to achieve desired result. Don't have anything ready to share yet

[utopiaio]

@0419 I'm pretty sure I'm missing something (Lily is no where near ready + very opinionated on redux approach)

Vue-router + redux: at first I made the mistake of subscribing on every component, which _pilled_ up subscriptions to the store on navigation. Currently I'm using props (duh) to pass the state(or part of it) or components them selves ask for the state

if anyone is interested I'll make gist post of vue + vue-router + redux (as the way I approached it on Lily)

[zhongqf]

+1

[kfirba]

+1

Currently building rather big SPA using Vue-router and using Vuex will make it so much easier.

[nicolasparada]

And a template for vue-cli would be great :D

[utopiaio]

Vue + Redux on Lily

// * store.js *

// Redux Store
let store = createStore(...);

// a bit of reference magic which will be used for making our sate reactive
let state = {
  state: {}
};

let Redux = {
  /**
   * Redux store state
   *
   * @return {Object} state object
   */
  get state() {
    return state.state;
  },

  /**
   * this is a big no-no, but one can easily get through
   * NEVER EVER attempt to directly set the state
   *
   * @param {Object} v
   */
  set state(v) {
    throw new Error('you shall not pass...to the state');
  }
};

// our state object becomes reactive --- in-short, Vue magic
let _vm = new Vue({
  data: {state}
});

store.subscribe(() => {
  // if you want to go rouge, use _vm.$set --- though i think it's costly
  // _vm.$set('state.state', store.getState());
  state.state = store.getState();
});

exports.store = store;
exports.redux = Redux;

now to use Redux store with a component, simply add it inside computed

  import { redux } from './store';

  module.exports = {
    name: 'componentName',
    computed: {
      state() {
        return redux.state;
      }
    }
  };

[jonagoldman]

@moe-szyslak no offence but what's all that Lily and The Rock stuff? never heard of that and how does its related to vue-router?

[utopiaio]

Lily is a personal side-project i'm working on, currently the _active_ branch is Vue, and it uses vue-router and Redux. @0419 showed interest in how i approached Redux, Vue and Vue-router. I posted the snippet hoping to _clarify_.

[85636682]

@yyx990803 the example using router and vuex together is finished?

[egonyans]

The weakest point of current vuex state is data dependancies. If one state depends on another you'll end up set the watchers/checkers. In rx I would just use ReplaySubject and combine functionality, but here it is way more tricky. You can't simply set a dependency on nested object without extra heavy logic.

[plcosta]

@yyx990803 There is already an example using router and vuex together?

[wdmtech]

@plcosta I found that they weren't compatible in 0.3.0 (then found issue #56!), but 0.4.0 has just been released. Just waiting for the npm release, then I may be able to put an example together.

[marchFantasy]

@yyx990803 ,vuex0.3的版本还是比较简单能和vue-router结合在一起的，因为store是公共的，组件app.vue可以直接import store，两者结合的也很好；但是vuex0.5后，问题来了：vuex需要个vue 的实例化对象，vue-router却依然只是需要个component，希望给个解决办法？

[ejfrancis]

you just have to add the store property to your root App component before it's passed to the router, so if you're setting up the router like this

//index.js
import { configRouter } from './route-config';

//the outer-most component, containing the entire app
import App from './components/App.vue';

//add middleware
Vue.use(VueRouter);

//create router
const router = new VueRouter({
  history: true,
  saveScrollPosition: true
});

//add routes
configRouter(router);

router.start(App,'#app');

the App component has to have the store attached to it

//App.vue
<template>
  <div class="app">
    <router-view></router-view>

  </div>
</template>

<script>
  import store from './../vuex/store';  
  export default {
    name: 'App',
    store: store
  }
</script>

[williamstar]

@ejfrancis thanks alot ,it works better!

[dschniepp]

@ejfrancis thank you. How do you handle the $loadingRouteData property?

[Lxxyx]

+1
等这个例子等很久了，在vue-router的情况下一直无法获取vuex中的状态。结果发现也没有官方例子。

[ejfrancis]

@dschniepp I'm not sure, I don't use that property currently. But I imagine it should just be set on the component's local state if you've got a route.data method on the component, so you can access it via this.$loadingRouteData. That's a component-level temporary data value so I personally wouldn't try to store it in vuex

[funkyLover]

take a look at vuejs/vuex-router-sync.
still can't find example using router and vuex together. but maybe can take a try with vuex-router-sync.
found in vuejs/vuex#84

[funkyLover]

the vuejs/vuex-router-sync is quite easy to use.
I have made a boilerplate.
however, I get some weird situation with store.action, I have already issue that(issue#101)
please help 😭

[CrazyUmka]

Where can I find an example of using vue-router with vuex?

[chrisvfritz]

The two projects work independently of each other. Which part of the integration are you having trouble with?

[CrazyUmka]

I want to learn the best development architecture. Hooks vue-router using promises, although the vuex doesn't use promises. How to use vuex with vue-router hooks? Maybe you need to write an action that returns a promise? I don't know(
This is example(But I not sure is correctly use together):

import store from 'store';

export default {
   // ... This is body component ... 
    route: {
        canActivate(transition) {
            if (store.state.app.ready)
                return Promise.resolve(true);

            return new Promise((resolve) => {
                const unwatch = store.watch('app.ready', (val) => {
                        if (val) {
                            unwatch();
                            resolve(val);
                        }
                });
          });
        }
    }
}

[fnlctrl]

@CrazyUmka Actually you need an action that returns a promise, and call the action inside router hooks

[chrisvfritz]

I haven't personally used this on a project, but is this what you're looking for? https://github.com/vuejs/vuex-router-sync

[jonagoldman]

@chrisvfritz vuex-router-sync just keeps the vuex state in sync with the route state, it has nothing to do with promises or actions.

[CrazyUmka]

Hmm... How to explain what I need. A vue-router works in a certain way with the browser's address bar and shows certain components of the current address.

I need to when you copy links from the browser and send to another user has the ability to restore the state.

[chrisvfritz]

@CrazyUmka If you need a way to save and fetch state from URL parameters, I do that exact thing in a simple community project (it doesn't even use vue-router actually). I do it in a Vue agnostic way like this. It's used in a component like this. And here's the live app in action. Hope that helps!

[jonagoldman]

guys.. guys.. most apps need to wait for a server response before showing the data to the user. you can choose any technology you like but the question here is how to do it when you choose vue + vuex + vue-router. main issue is that you use promises with vue-router but you don't with vuex. this is a point of confussion.

[fnlctrl]

@jonagoldman
Vuex actions can return promises.
Try calling actions that returns promises inside router's hook.

[jonagoldman]

@fnlctrl sure, take a look at https://github.com/vuejs/vuex/issues/26 I opened last year, it still feels a bit odd to me. i'm waiting for an official implementation guide to clear out all doubts.