Vue/Vuex: 如何用Vuex代替传数据的emitting函数？

Question

我正在考虑将 Vuex 添加到我的项目中以保持状态井井有条。我如何使用 Vuex 替换发出的函数，就像下面的示例一样？ Vuex 能否完全取代发射的需要？

Parent

<child-component @handleUpdatePost="updatePost"></child-component>

methods: {
    updatePost(person) { 
        console.log(person)
        //do something
    }
}

Child

<button @click="clickButton"></button>

methods: {
   clickButton() {
        let person = "foo"
        this.$emit('handleUpdatePost', person)
   }
}

Answer 1

我创建了一个简单的 Vue 2 CLI 应用程序，作为如何用 Vuex 替换发射场景的示例。

商店：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Initial message'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
})

export default store;

Parent.vue

<template>
  <div class="parent">
    <h2>Parent.vue</h2>
    <div class="row">
      <div class="col-md-6">
        <label class="font-weight-bold">Message from Vuex: </label>
        <span>{{ message }}</span>
      </div>
    </div>
    <hr>
    <child />
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    components: {
      Child
    },
    computed: {
      message() {
        return this.$store.state.message;
      }
    }

  }
</script>

<style scoped>
  label {
    margin-right: 0.5rem;
  }
</style>

Child.vue

<template>
  <div class="child">
    <h3>Child.vue</h3>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitMessage">
          <div class="form-group">
            <label>New Message:</label>
            <input type="text" class="form-control" v-model="newMessage">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newMessage: ''
      }
    },
    methods: {
      submitMessage() {
        this.$store.commit('updateMessage', this.newMessage);
        this.newMessage = '';
      }
    }
    
  }
</script>

Vue/Vuex: 如何用Vuex代替传数据的emitting函数？

Vue/Vuex: How to use Vuex to replace emitting functions that pass data?

vue.js

vuex

vuejs2