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
