Vue进阶之Vue无代码可视化项目（三）

项目初始化

store的使用

DataSourceView.vue

<template>
  <div class="about">
    <h1>
      DataSource {
  { store.count }}-{
  { store.double }}
      <button @click="store.increment">+</button>
      <button @click="store.decrement">-</button>
    </h1>
  </div>
</template>

<script lang="ts" setup>
import {
     useCounterStore} from '@/stores/counter'

// 丢掉响应式
// const {count,increment,double,decrement} = useCounterStore()
const store=useCounterStore()
</script>

<style>
@media (width >= 1024px) {
     
  .about {
     
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

stores/counter.ts

import {
    ref, computed } from 'vue'
import {
    defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
   
    const count=ref(0)

    const double=computed(()=>count.value*2)
    const increment=()=>{
   
      count.value++
    }
    const decrement=()=>{
   
      count.value--
    }


    return{
   
      count,
      double,
      increment,
      decrement
    }
})

开发模式按钮

创建editor.ts文件

• store
  • editor.ts

store/editor.ts

import {
    ref } from 'vue'
import {
    defineStore } from 'pinia'

export const useEditorStore = defineStore('editor', () => {
   
  //  开发模式
  const debug=ref(false)

  const toggleDebug=()=>{
   
    debug.value=!debug.value
  }

  return{
   
    debug,
    toggleDebug
  }
})

LayoutView.vue

<template>
  <div class="about" :class="{debug:editorStore.debug}" @click="editorStore.toggleDebug()">
    <h1>Layout</h1>
  </div>
</template>

<script lang="ts" setup>
import {
     useEditorStore} from '@/stores/editor'
const editorStore = useEditorStore()
</script>
<style>
@media (width >= 1024px) {
     
  .about {
     
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .debug {
     
    border: 2px dashed #afafaf;
  }
}
</style>

导航条

安装图标icon

icon-park github
icon-park官网

package.json

"dependencies": {
   
   ...
    "@icon-park/vue-next":"1.4.2"