VUE2中组件中v-modle的值怎么传给vuex

在Vue 2中，如果想把组件内的`v-model`绑定的数据传递到Vuex状态管理器中，通常的做法是通过事件bus或者自定义属性的方式实现数据的流动。

1. **事件总线（Event Bus）**:
- 创建一个独立的事件中心` EventBus.js`
- 在组件内，当`v-model`的值改变时，发射一个事件，例如 `this.$emit('update:value', newValue)`
- 在父组件或者Vuex actions中监听这个事件，然后更新相应的store state

// 组件内
<template>
  <input v-model="localValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return { localValue: '' };
  },
  methods: {
    handleInput(newValue) {
      this.$bus.$emit('update:state', newValue);
    }
  }
};
</script>

// bus.js
import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

// 使用
// parent-component.vue
<template>
  <ChildComponent :value.sync="stateValue" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import eventBus from '@/eventBus';

export default {
  components: {
    ChildComponent,
  },
  computed: {
    stateValue() {
      return this.$store.state.myState;
    }
  },
  watch: {
    stateValue(newVal) {
      eventBus.$on('update:state', newVal => (this.stateValue = newVal));
    }
  }
};
</script>

2. **自定义属性（Props）**:
- 如果组件之间的通信更为直接，可以使用`props`从父组件向子组件传递数据，然后在子组件内部修改后再通过`$emit`通知父组件。

// ParentComponent.vue
<template>
  <ChildComponent :myValue.sync="stateValue" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return { stateValue: '' };
  }
};
</script>

// ChildComponent.vue
<template>
  <input v-model="myValue" @input="$emit('update:myValue', myValue)" />
</template>
<script>
export default {
  props: ['myValue'],
  data() {
    return { myValue: null };
  }
};
</script>