javascript title - Как перемещаться с помощью vue router из Vuex-действий




js attribute (5)

В main.js (тот, где мы «устанавливаем» все модули и создаем экземпляр Vue , то есть src/main.js ):

const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

Это мой пример, но в нашем случае наиболее важным здесь является const vm и router

В вашем store :

import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.push({name: someRouteName})
}

PS Используя import { vm } from '@/main' мы можем получить доступ ко всему, что нужно в Vuex , например vm.$root Vuex , который необходим некоторым компонентам bootstrap-vue .

PPS Кажется, мы можем использовать vm когда все загружено. Другими словами, мы не можем использовать vm внутри someMutation в случае, если мы вызываем someMutation внутри someMutation mounted() , потому что someMutation mounted() приходит / возникает до создания vm .

Я создаю веб-приложение с Vue 2.x и Vuex 2.x. Я извлекаю некоторую информацию из удаленного места через HTTP-вызов, я хочу, чтобы, если этот вызов не удался, я должен перенаправить на другую страницу.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

Но this.$router.push({path:"/"}) дает мне следующую ошибку.

Неподготовлено (в обещании) TypeError: невозможно прочитать свойство «push» неопределенного

Как это можно достичь.

Имитированный JsFiddle: here


Мне не нравилось сохранять состояние местоположения моего приложения отдельно от остальной части моего состояния приложения в Магазине, а также управлять как маршрутизатором, так и хранилищем, поэтому я создал модуль Vuex, который управляет состоянием местоположения в Магазине.

Теперь я могу перемещаться, отправляя действия, как и любое другое изменение состояния:

dispatch("router/push", {path: "/error"})

Это имеет дополнительное преимущество, позволяющее упростить обработку таких анимированных переходов страниц.

Нетрудно свернуть собственный модуль router , но вы также можете попробовать мои, если хотите:

https://github.com/geekytime/vuex-router


Похоже, что вы не вводите свой маршрутизатор в свое приложение, следовательно, он является «неопределенным»,

В предыдущих версиях vue-router вы бы: Vue.use(VueRouter) , с 2.0 вы можете ввести маршрутизатор в приложение, как Vue.use(VueRouter) ниже:

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

это должно сделать его доступным как this.$router во всем приложении

После ответа на соответствующий вопрос: Как использовать Vue Router из состояния Vuex? похоже, что Vuex не получит экземпляр маршрутизатора при this.$router . Поэтому было предложено два метода для обеспечения доступа к экземпляру маршрутизатора.

Первый из них более прямой, что связано с установкой глобального веб-пакета в экземпляр.

Второе включает использование Promises с вашим действием vuex, которое позволит вашим компонентам использовать их ссылку на экземпляр маршрутизатора, следуя за действиями, разрешающими / отклоняющими Promise.


import router from './router'

и используйте router.push

Просто так.


Вы не используете display: none для родителя (что повлияет на дочерние элементы), вы используете visibility: none для родительского элемента, а внутри дочерних элементов есть атрибут cibility visibility: visible . Если вы хотите, чтобы дочерние элементы скрывали, либо установите их visible: hidden тоже, либо используйте display: none в родительском элементе.

Итак, как указал Кайл, вы можете использовать $('#parent_div').toggle(); , который будет легко применять display: none к #parent_div .

Я просто добавлю, что visibility и display не совпадают. Например, если элемент имеет width: 10px , height: 10px , visibility сохраняет размерное пространство элемента (оно по-прежнему занимает width: 10px , height: 10px ), тогда как display: none полностью удаляет размеры элемента из родительского элемента. ( width: 0 , height: 0 ). Visibility означает, что он все еще визуально представлен в потоке относительно других затронутых элементов, он просто не виден; display означает, что он не виден и не отображается на экране относительно других отображаемых / видимых элементов.





javascript vue.js vuex