您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue3组合式api+vuex+非单文件组件(组合式api)(setup)+备忘
发布时间：2024-05-30 16:24:01编辑：雪饮阅读（）
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.global.js"></script>
<script src="vuex.global.js"></script>
<title>vue3组合式api+vuex+非单文件组件(组合式api)(setup)+备忘</title>
</head>
<body>
<div id="app">
<div>
<p>vuex在单页面不同组件直接的参数传递（同步更改）比较优雅，省不少代码，之前只觉得麻烦，但是实际上传参及对这些数据的同步在不同组件，尤其是非父子组件间传递与同步就能省心不少。</p>
<p>这里结合最新的vue3以及非单文件组件的方式实现，以做备忘。非单文件组件也被称为选项式组件，vue3文档中基本很难找到相关介绍。</p>
<p>但是在以前的老项目（前后端混写在后端的view层），或者某些综合多个知识点时候，又懒得单独开一个项目（比如这次的"vue3组合式api+vuex+非单文件组件(组合式api)(setup)"）来说就比较方便些，整个示例就只有一个文件</p>
<p>直接运行在浏览器即可（这里引入的vue和vuex当然是必须的，那么其实也可以cdn，只不过我习惯down下来）</p>
<ComponentA></ComponentA>
<ComponentB></ComponentB>
</div>
</div>
<script>
const { createApp, ref } = Vue
const { createStore } = Vuex
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})
function add1(){
store.state.count++;
}
function add2(){
store.state.count+=2;
}
//大小写组件使用时候会要以下划线方式来，所以全小写吧
const componenta=Vue.defineComponent({
setup() {
const count = ref(0);
return {
add1
}
},
template:`
<h1>ComponentA</h1>
<p>{{ $store.state.count }}</p>
<button @click="add1()">add</button>
`
});
const componentb=Vue.defineComponent({
setup() {
const count = ref(0);
return {
add2
}
},
template:`
<h1>ComponentB</h1>
<p>{{ $store.state.count }}</p>
<button @click="add2()">add</button>
`
});
var app = createApp({
setup() {
return {}
}
});
app.use(store)
app.component('componenta', componenta)
app.component('componentb', componentb)
app.mount('#app')
</script>
</body>
</html>
关键字词：vue3,vuex,组合式,非单文件,setup