vuex-sync의 용도는 무엇입니까?

vuex-sync의 용도는 무엇입니까?

가 vuex-router-sync 시키기 입니다.routevuex store는 이 사이트에 할 수 .route음음음같 뭇매하다

store.state.route.path
store.state.route.params

나는 지만, 가 handle handle handle도 처리할 수 .route타타에 this.$route아, 아, 아, 아, 아, 아, 아, 아, 아, 아.

스토어에서 루트를 사용해야 하는 경우 및 vuex-router-sync가 필요한 시나리오는 무엇입니까?

을 사용하다vuex-router-sync할 수 , 하려는 경우 할 수 .route의 vuex의 메서드예:this.$routeVuex(부렉스)

예를 들어 보겠습니다.
하나의 컴포넌트에 메시지를 표시한다고 가정합니다..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-router-sync source code pasted here because no proper cdn service found
function sync(store, router, options) {
  var moduleName = (options || {}).moduleName || 'route'

  store.registerModule(moduleName, {
    namespaced: true,
    state: cloneRoute(router.currentRoute),
    mutations: {
      'ROUTE_CHANGED': function(state, transition) {
        store.state[moduleName] = cloneRoute(transition.to, transition.from)
      }
    }
  })

  var isTimeTraveling = false
  var currentPath

  // sync router on store change
  store.watch(
    function(state) {
      return state[moduleName]
    },
    function(route) {
      if (route.fullPath === currentPath) {
        return
      }
      isTimeTraveling = true
      var methodToUse = currentPath == null ?
        'replace' :
        'push'
      currentPath = route.fullPath
      router[methodToUse](route)
    }, {
      sync: true
    }
  )

  // sync store on router navigation
  router.afterEach(function(to, from) {
    if (isTimeTraveling) {
      isTimeTraveling = false
      return
    }
    currentPath = to.fullPath
    store.commit(moduleName + '/ROUTE_CHANGED', {
      to: to,
      from: from
    })
  })
}

function cloneRoute(to, from) {
  var clone = {
    name: to.name,
    path: to.path,
    hash: to.hash,
    query: to.query,
    params: to.params,
    fullPath: to.fullPath,
    meta: to.meta
  }
  if (from) {
    clone.from = cloneRoute(from)
  }
  return Object.freeze(clone)
}

.router-link-active {
  color: red;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>

<div id="app">
  <p>
    <router-link to="/top">Go to Top</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

여기서 빈둥거리다

와 같이 는 잘 되어 있습니다.vuex ★★★★★★★★★★★★★★★★★」vue-router의 논리입니다.
이 패턴은 현재 경로와 vuex의 getter에서 반환된 값 간의 관계에 관심이 없는 경우에 매우 효과적일 수 있습니다.

제가 Vue를 배울 때 이 실을 봤어요.그 질문에 대한 나의 이해를 조금 더했다.

Vuex는 Vue 애플리케이션의 상태 관리 패턴을 정의합니다.컴포넌트 소품을 정의하고 모든 장소에서 소품을 통해 공유 상태를 전달하는 것이 아니라 중앙 집중식 스토어를 사용하여 여러 컴포넌트가 공유하는 상태를 정리합니다.상태 돌연변이에 대한 제한은 상태 전이를 보다 명확하고 쉽게 추론할 수 있도록 합니다.

제공된 스토어 상태가 동일한 경우 일관된(또는 동일한) 뷰를 가져오거나 빌드하는 것이 이상적입니다.공유되는 문제를 합니다., 및가 있습니다.은, 「」에서 입니다.this.$router★★★★★★ 。

vuex-router-sync는 라우터 스테이트를 집중형 스테이트스토어에 동기화하기 위한 도우미입니다. 상태 할 수 , 이 는 체크할 this.$router.

에 주의:route그를 「변화 것은 「변화」를.$router.push또는$router.go다음과 같이 저장 중인 작업을 정의하면 도움이 될 수 있습니다.

// import your router definition
import router from './router'

export default new Vuex.Store({
  //...
  actions: {
    //...
    // actions to update route asynchronously
    routerPush (_, arg) {
      router.push(arg)
    },
    routerGo (_, arg) {
      router.go(arg)
    }
  }
})

이렇게 하면route스토어 액션의 갱신을 실시해, 그 갱신을 완전하게 실시할 수 있습니다.this.$router컴포넌트의 의존성.

언급URL : https://stackoverflow.com/questions/44171210/what-is-vuex-router-sync-for