Блог

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

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 с увеличенным значением

В дочернем компоненте 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 вызывается в mounted(), она увеличивает state.type для всех двух дочерних компонентов, но при использовании метода mutateStore() она обновляется в дочернем компоненте 1, но изменение не обнаружено в дочернем компоненте 2.

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

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

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

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

 npm install vuex-shared-mutations