關於vuex-router-sync的作用

我爲什麼要轉載這篇文章呢？原因其實很簡單，也是讓人失望。事情的經過是這樣的，我在別人的代碼裏看vuex-router-sync，我當時就在想爲什麼要用這個東西，這個東西可以解決什麼問題，可以帶來什麼好處，在什麼樣的場景下需要用它，用它是不是會比其他方案更加方便。然後我首先還是選用了百度進行搜索，翻了3頁，都沒有找到一篇像樣的問題，真正去說這個東西的作用，都是人云亦云，搜索了半天，終於看到了上面的鏈接，stackoverflow大家都知道的，是個英文網站，我的英文不好，但是沒有辦法了我只能上去看看，然後就發現人家就是解決了我的疑惑。我就想到底是寫中文文字的程序員技術不行還是都懶得去寫。不管怎麼樣，我還是想站在中文的角度吧這個問題回答一下，方便後續有其他人搜索的時候可以更加快速的找到問題的答案。

簡書上一篇文字是這樣描述的：
-----開始-----
vuex-router-sync 插件通過動態註冊模塊將 vue-router 和 vuex 結合在一起，實現應用的路由狀態管理。
使用如下
import { sync } from 'vuex-router-sync'
import store from './vuex/store' // vuex store instance
import router from './router' // vue-router instance
const unsync = sync(store, router) // done. Returns an unsync callback fn
-----結束-----

思否上有一個回答是這樣的
-----開始-----

-----結束-----

我看到這些個回答，我真的很懵逼，還是不知道這個vuex-router-sync可以解決什麼問題

我來來看看stackoverflow是怎麼描述的（我直接翻譯，蹩腳的英文，大家見諒）
如下：
**但當您嘗試在Vuex的方法中使用Route對象時，您可能需要它（在Vuex的領域中，$route不會很好地工作）
然後回答者舉了一個例子：假設您想在一個組件中顯示一條消息，希望在幾乎每一個頁面上都顯示“Have a nice day, Jack”，除了首頁，因爲首頁要顯示"Welcome back, Jack".
藉助vuex-router-sync，您可以輕鬆實現**

const Top = {
  template: '<div>{{message}}</div>',
  computed: {
    message() {
      return this.$store.getters.getMessage;
    }
  },
};
const Bar = {
  template: '<div>{{message}}</div>',
  computed: {
    message() {
      return this.$store.getters.getMessage;
    }
  }
};

const routes = [{
    path: '/top',
    component: Top,
    name: 'top'
  },
  {
    path: '/bar',
    component: Bar,
    name: 'bar'
  },
];

const router = new VueRouter({
  routes
});

const store = new Vuex.Store({
  state: {
    username: 'Jack',
    phrases: ['Welcome back', 'Have a nice day'],
  },
  getters: {
    getMessage(state) {
      return state.route.name === 'top' ?
        `${state.phrases[0]}, ${state.username}` :
        `${state.phrases[1]}, ${state.username}`;
    },
  },
});

// sync store and router by using `vuex-router-sync`
sync(store, router);

const app = new Vue({
  router,
  store,
}).$mount('#app');

如您所見，組件與Vuex和Vue-router的邏輯完全分離。這種模式有時確實適用於您不關心當前路由和Vuex getter返回值之間關係的情況。

到此，我不知道看到文章的你是否能夠明白，如果不用vuex-router-sync，你會怎麼實現，會遇到什麼困難？

原文地址：https://segmentfault.com/a/1190000019925019