在jsPsych中使用Vue

jspsych 介绍

jsPsych是一个非常好用的心理学实验插件，可以用来构建心理学实验。具体的就不多介绍了，大家可以去看官网：https://www.jspsych.org/latest/

但是大家在使用时就会发现，这个插件只能使用js绘制界面，或者说传一段html代码，就是不支持任何现代化的前端框架。在如今的习惯了组件化的前端看来是非常的难受，代码复用性非常差，编程体验也不好。

jspsych-vue插件介绍

今天给大家推荐的一个组件 jspsych-vue就是为了解决这个问题而设计的。下面简单介绍下如何使用。

创建vue工程

使用npm create vue创建就可以。这里就不多赘述了。

安装

使用yarn或者npm安装都可以：

yarn add jspsych-vue 

导入样式

需要在main.js中导入样式：

import 'jspsych/css/jspsych.css' //这里导入 import { createApp } from 'vue' import App from './App.vue'  const app = createApp(App) app.mount('#app') 

使用

在App.vue中，使用Jspsych创建一个渲染实验的位置，比如：

<script setup> import JsPsychVue from "jsPsych-vue"; var instance; const init = e => instance = e; </script>  <template>   <JsPsychVue :options="options" @init="init">   </JsPsychVue>  </template> 

这里就顺利拿到了jspsych的实例instance。下面就和jspsych原生的一样，定义一个timeline，然后run就可以。

import jsPsychImageKeyboardResponse from '@jspsych/plugin-image-keyboard-response'  onMouted(()=>{ 	const timeline = [ 		type: jsPsychImageKeyboardResponse 	] 	jspsych.run(timeline) }) 

看到这里可能就有人问了，我这样写和原生的jspsych有什么区别？？？

下面就是神奇的地方，你可以用一个组件代替plugin，需要做的就是导出一个info就可以。

例子：

<template> <div> {{ props.hello }} </div> <button @click="handleClick">点击跳转</button> </template> <script setup lang="ts"> import { JsPsych } from "jspsych"; import { inject } from "vue";  const jsPsych: JsPsych = inject('jsPsych')! const props = defineProps(['trial', 'on_load'])  const handleClick = () => jsPsych.finishTrial()  defineOptions({   info: {     name: 'hello world',     parameters: {       msg: {         type: String,         default: 'hello'       }     }   } }) </script> 

简单来说，需要导出一个info对象，告诉jspsych需要传入什么参数，这个参数可以在timeline里定义。然后也没有trial函数了，在轮到这个trial的时候，会自动挂载这个组件，然后执行setup方法。把之前trial函数的内容放在setup中就可以。

最后，不要忘记调用jspsych.finishTrial来结束当前的trial。

用了这个组件，可以随心所欲的在jspsych中使用vue的众多UI库了！

最后放上仓库地址，觉得有帮助的小伙伴可以点点star！https://github.com/HGGshiwo/jspsych-vue.git