Vuex не работает с разными компонентами - PullRequest
Новая
       44

Vuex не работает с разными компонентами

0 голосов
/ 16 марта 2019

У меня есть такая структура для приложения Vue: App.vue -> Представление маршрутизатора (с двумя дочерними компонентами)

App.vue 

<template>
  <div id="app" @click="mutateStore(null)">
    <router-view @storeUpdate="mutateStore"/>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    mutateStore(){     
      this.$store.commit('increment')
    }
  },
  mounted(){
    this.$store.commit('increment')
  }
}
</script>

<style>
...styles
</style>

main.js 

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    type: 1
  },
  mutations: {
    increment (state) {
      state.type++
    }
  }
})

new Vue({
  el: '#app',
  router, 
  store,   
  render: h => h(App)
})

router / index.js 

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Childcomponent1'
import Display from '@/components/Childcomponent2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Childcomponent1',
      component: Main
    },
    {
      path: '/display',
      name: 'Childcomponent2',
      component: Display
    }
  ]
})

В дочернем компоненте 1 у меня есть кнопка, при нажатии которой можно будет сделать: 

this.$emit("storeUpdate")

, который запускает обработчик событий mutateStore () в App.vue. В Vue Dev Tools он также показывает state.type с увеличенным значением

InДочерний компонент 2, я отображаю непосредственно значение state.type, вычисленное: 

<template>
	<div class="main">
    {{type}}
	</div>
</template>

<script>
export default {
  name: 'Childcomponent2',
  computed: {
    type () {
      return this.$store.state.type
    }
  }
}
</script>

<style scoped>
..Styles
</style>

Но значение никогда не обновлялось в дочернем компоненте 2, даже при просмотре в Vue Dev Tools.

И одно любопытное наблюдение, когда тот же коммитв App.vue вызывается в mount (), он увеличивает значение state.type для всех дочерних компонентов, но при использовании метода mutateStore () он обновляется в дочернем компоненте 1, но изменение не обнаруживается в дочернем компоненте 2..

Обратите внимание, что до того, как я сделал часть обработчика emit / события в App.vue, я уже пытался изменить хранилище напрямую из дочернего компонента, но безрезультатно, поэтому вместо этого я попробовал обработчик события emit.

Я что-то сделал неправильно?

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 19 марта 2019

Нашел это. Оказывается, я ошибочно предположил, что стандарт Vuex имеет встроенную поддержку общих состояний для нескольких окон браузера с использованием localStorage. По-видимому, он только разделяет состояние между несколькими компонентами в той же вкладке / окне браузера. Чтобы обеспечить поддержку нескольких браузеров, необходимо добавить плагин: vuex-shared-mutations 

npm install vuex-shared-mutations
...