什么情况下编写vue的可复用组件

Question

用vue开发页面时，该页面中有两块地方的样式一样，只是显示的数据不一样，但是显示的数据是从vuex中通过props传进去的，里面的数据修改后也要同步进vuex，这种情况下怎么处理？

要是编写成可复用组件的话，怎么确保两个组件修改的是各自的vuex里的数据。

要是不用可复用组件的话，对这种具有相同样式，但是数据显示不同，还要操作vuex的怎么处理？拜谢

Answer 1

新手,前些天写的一个页面,是这样写的

父组件取到vuex的两组数据,再分别传给调用的两个子组件,子组件接收数据分别渲染..

不知是否有更好的方法...

Answer 2

我觉得这种不算复用组件的情况。

Answer 3

父组件
如果想写可复用组件, 那么vuex的$store.state就不能写在可复用组件内部, 需要写在其父组件里, 父组件中给自己的data中的数据赋值为$store.state

子组件
子组件然后通props接收父组件传递的数据; 修改数据通过this.$emit('事件名', '数据')来告知其父组件, 让父组件来通过commit去触发mutation修改state.