Как синхронизировать состояния между бэкендом и внешним интерфейсом, используя vuex и vue-router? - PullRequest
Новая
       46

Как синхронизировать состояния между бэкендом и внешним интерфейсом, используя vuex и vue-router?

7 голосов
/ 22 марта 2019

Я разрабатываю одностраничное приложение с использованием vue-cli3 и npm.

Проблема: заполнение базового целочисленного значения (хранящегося в состоянии vuex) с именем counter , которое былоувеличен / уменьшен в бэкэнде к внешнему интерфейсу, который отображает новое значение.

Мутации инкремента / декремента работают нормально на обоих компонентах (Frontend / Backend), но кажется, что мутации не работают натот же экземпляр маршрута: при увеличении / уменьшении счетчика в бэкэнде значение не обновляется во внешнем интерфейсе и т. д.

store.js:

Содержит состояние, которое необходимо синхронизировать между Backend / Frontend. 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    }
  }
})

index.js:

Определяет маршруты, которые имеет vue-routerпредоставить. 

import Vue from 'vue'
import Router from 'vue-router'
import Frontend from '@/components/Frontend'
import Backend from '@/components/Backend'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Frontend',
      component: Frontend
    },
    {
      path: '/backend',
      name: 'Backend',
      component: Backend
    }
  ],
  mode: 'history'
})

main.js:

Inits экземпляр Vue и предоставляет глобальный store и router instance. 

import Vue from 'vue'
import App from './App'
import router from './router'
import { sync } from 'vuex-router-sync'
import store from './store/store'

Vue.config.productionTip = false

sync(store, router)

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

Frontend.vue / Backend.vue:

Оба (Frontend / Backend) используют здесь один и тот же код.Они используют состояние counter для его отображения и изменения. 

<template>
  <div> Counter: {{ getCounter }}
    <br>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Frontend',
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  },
  computed: {
    getCounter () {
      return this.$store.state.counter
    }
  }
}
</script>

Было бы замечательно, если бы кто-то сказал мне, что мне не хватает, или если я неправильно понял концепцию vuexи вью-роутер.

1 Ответ

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

@ свойства компонента sebikolon, которые определены в data () => {}, являются реактивными, методы - нет, они вызываются один раз.Вместо {{ getCounter }} просто используйте {{ $store.state.counter }}. ИЛИ инициировать свойство в каждом компоненте, которое получает значение вашего состояния. 

data: function () {
    return {
        counter: $store.state.counter,
    }
}
...