vuex와 vue-router를 사용하여 백엔드와 프런트엔드 사이의 상태를 동기화하는 방법

vuex와 vue-router를 사용하여 백엔드와 프런트엔드 사이의 상태를 동기화하는 방법

나는 vue-cli3와 npm을 이용한 한 페이지 어플리케이션을 개발하고 있다.

문제:새 값을 표시하는 프런트엔드의 백엔드에서 증가/감소된 기본 정수 값(vuex 상태로 저장됨)을 채우는 중.

증분/감소 변이는 두 구성 요소(프론트 엔드/백엔드)에서 모두 정상 작동하지만, 동일한 경로 인스턴스(instance)에서는 작동하지 않는 것 같다.백엔드에서 카운터를 증가/감소할 때, 값은 프런트엔드에서 업데이트되지 않는다.

store.js:

백엔드/프론드 간에 동기화해야 하는 상태를 포함한다.

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--
    }
  }
})

인덱스.js:

부루터가 제공해야 하는 경로를 규정한다.

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:

Vue 인스턴스를 사용하고 글로벌 저장소 및 라우터 인스턴스를 제공한다.

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')

프런트엔드.vue/백엔드.vue:

양쪽(프론트 엔드/백엔드) 모두 여기서 동일한 코드를 사용한다.그들은 그것을 표시하고 수정하기 위해 주 카운터를 사용한다.

<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와 vue-router의 개념을 잘못 이해했다면 정말 멋질 것이다.

두 구성품 모두 매장에서 계산대로 가져오십시오.필요없습니다data상점은 이미 반응하고 있기 때문에.

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'Frontend',
  methods: {
    ...mapMutations([
      'increment',
      'decrement',
    ])
  },
  computed: {
    ...mapState({
        counter: state => state.counter,
    })
  }
}
</script>

참조용:

• mapState: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper
• mapMutations: https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components

@pikolon 구성 요소 속성 정의data () => {}반응성이 있고, 방법이 아니라, 한 번 불려진다.대신에{{ getCounter }}, 그냥 사용하다.{{ $store.state.counter }}. 또는 각 구성 요소에서 상태 값을 가져오는 속성을 시작하십시오.

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

참조URL: https://stackoverflow.com/questions/55301428/how-to-sync-states-between-backend-and-frontend-using-vuex-and-vue-router