vue组件使用store仓库

第一步：

数据和方法
 this.repeatData = res.data.data.data;
  this.setIsShowRepeatList(true);

第二步：

在methods方法中定义方法
...mapMutations([
          'setIsShowRepeatList',
        ]),
        

第三步：

初始化组件
import RepeatListDialog from '../../components/repeatListDialog'
 components:{
      RepeatListDialog
    },
 <RepeatListDialog :repeatData="repeatData"/>
 第四步：
 

在store仓库index.js页面的mutations中设置isShowRepeatList变量
state: {
moduleName: ‘claim’,
routes: null,
menu: [],
sysMenu: null, // 系统权限菜单
userInfo: Vue.prototype.$cookies.get(‘userInfo’),
isShowRepeatList:false,

},
setIsShowRepeatList(state, data){
state.isShowRepeatList=data;
}

组件
<template>
	<div v-if="isShowRepeatList">
		<el-dialog
			title="提示"
			:visible.sync="isShowRepeatList"
			 width="26%"
			:before-close="closeDialog"
		>
			<span class="repeat-list-tip">未重复数据已导入，以下审批编号对应的数据为重复数据，请确认!</span>
			<ul class="repeat-list">
				<li v-for="(item, index) in repeatData" :key="index">{{ item }}</li>
			</ul>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="closeDialog">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
	name: 'repeatListDialog',
	data() {
		return {}
	},
	props: [
		'repeatData', // 重复数据列表
	],
	computed: {
		...mapState([
			'isShowRepeatList',
		]),
	},
	methods: {
		...mapMutations([
			'setIsShowRepeatList',
		]),
		closeDialog() {
			this.setIsShowRepeatList(false)
		},
	},
}
</script>

<style lang="scss" scoped>
.repeat-list-tip {
	line-height: 20px;
	font-weight: bold;
}
.repeat-list {
	margin-top: 10px;
	height: 300px;
	border: 1px solid #ccc;
	overflow-y: scroll;
	li {
		margin: 5px;
	}
}
</style>