526互联

vue3.x代码片段

发布时间 2023-06-10 00:29:44作者: 黄河大道东

pinia状态管理使用示例

【main.js】

import './assets/main.css'
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)

app.mount('#app')

【src/stores/counter.js】

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

/**
 * 计数器状态
 *
 * @author J
 * @date 2023/6/9 23:38
 */
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increment() {
        count.value++
    }
    return {count, doubleCount, increment}
})


/**
 * 用户登录状态
 *
 * @author J
 * @date 2023/6/9 23:38
 */
export const userLoginStore = defineStore("userLoginStatus", () => {
    const loginStatus = ref(false);
    return {loginStatus};
})

使用

<script setup>
import {useCounterStore, userLoginStore} from './stores/counter'

const countStatus = useCounterStore();
const userLoginStatus = userLoginStore();
onclick = () => {
  countStatus.increment()
}
</script>

<template>
  <div>
    <h1>{{ countStatus.count }}</h1>
    <h1>{{ userLoginStatus.loginStatus }}</h1>
  </div>
</template>

全局变量使用示例

import './assets/main.css'
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 安装插件,会自动回调插件的init方法
app.use(createPinia())
app.use(router)

// 关键：提供出去一个全局变量
app.provide("global", "挂载了一个全局变量");

// 最后一步在挂载到根容器上
app.mount('#app')

使用

<script setup>
import {inject} from "vue";
    // 注入这个全局变量
    const g = inject('global');
    // 使用全局变量
    console.log("===========> " + g + " <===========")
</script>

<template>
  <div>
    <h1>{{ g }}</h1>
    <h1>{{ g }}</h1>
  </div>
</template>

ref()方法使用示例

  • （关键）在一个子组件中产生一个响应式的变量，这个变量就被vue代理变成响应式的
  • 用于操作虚拟DOM，将产生出来的变量与虚拟DOM绑定在一起，例如
<script setup>
import {inject, onMounted, ref} from "vue";
    // 通过main变量操作div元素
    const main = ref();
    // 通过canvas变量操作canvas元素
    const canvas = ref();
</script>
<template>
  <div>
    <div ref="main" style="width: 100%; height: 400px"></div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

集成echarts数据分析图表

官网：https://echarts.apache.org/examples/zh/index.html

<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
    
const main = ref();
const canvas = ref();
    
onMounted(() => {
  // 关键点,等虚拟DOM准备就绪,才能开始渲染
  init();
})

function init() {
  // 初始化echarts对象
  const myChart = echarts.init(main.value);

  const builderJson = {
    all: 10887,
    charts: {
      map: 3237,
      lines: 2164,
      bar: 7561,
      line: 7778,
      pie: 7355,
      scatter: 2405,
      candlestick: 1842,
      radar: 2090,
      heatmap: 1762,
      treemap: 1593,
      graph: 2060,
      boxplot: 1537,
      parallel: 1908,
      gauge: 2107,
      funnel: 1692,
      sankey: 1568
    },
    components: {
      geo: 2788,
      title: 9575,
      legend: 9400,
      tooltip: 9466,
      grid: 9266,
      markPoint: 3419,
      markLine: 2984,
      timeline: 2739,
      dataZoom: 2744,
      visualMap: 2466,
      toolbox: 3034,
      polar: 1945
    },
    ie: 9743
  };
  const downloadJson = {
    'echarts.min.js': 17365,
    'echarts.simple.min.js': 4079,
    'echarts.common.min.js': 6929,
    'echarts.js': 14890
  };
  const themeJson = {
    'dark.js': 1594,
    'infographic.js': 925,
    'shine.js': 1608,
    'roma.js': 721,
    'macarons.js': 2179,
    'vintage.js': 1982
  };
  const waterMarkText = 'ECHARTS';
  const ctx = canvas.value.getContext('2d');
  canvas.value.width = canvas.value.height = 100;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.globalAlpha = 1;
  ctx.font = '20px Microsoft Yahei';
  ctx.translate(50, 50);
  ctx.rotate(-Math.PI / 4);
  ctx.fillText(waterMarkText, 0, 0);

  const option = {
    backgroundColor: {
      type: 'pattern',
      image: canvas,
      repeat: 'repeat'
    },
    tooltip: {},
    title: [
      {
        text: '在线构建',
        subtext: '总计 ' + builderJson.all,
        left: '25%',
        textAlign: 'center'
      },
      {
        text: '各版本下载',
        subtext:
            '总计 ' +
            Object.keys(downloadJson).reduce(function (all, key) {
              return all + downloadJson[key];
            }, 0),
        left: '75%',
        textAlign: 'center'
      },
      {
        text: '主题下载',
        subtext:
            '总计 ' +
            Object.keys(themeJson).reduce(function (all, key) {
              return all + themeJson[key];
            }, 0),
        left: '75%',
        top: '50%',
        textAlign: 'center'
      }
    ],
    grid: [
      {
        top: 50,
        width: '50%',
        bottom: '45%',
        left: 10,
        containLabel: true
      },
      {
        top: '55%',
        width: '50%',
        bottom: 0,
        left: 10,
        containLabel: true
      }
    ],
    xAxis: [
      {
        type: 'value',
        max: builderJson.all,
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        max: builderJson.all,
        gridIndex: 1,
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        data: Object.keys(builderJson.charts),
        axisLabel: {
          interval: 0,
          rotate: 30
        },
        splitLine: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'category',
        data: Object.keys(builderJson.components),
        axisLabel: {
          interval: 0,
          rotate: 30
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
          position: 'right',
          show: true
        },
        data: Object.keys(builderJson.charts).map(function (key) {
          return builderJson.charts[key];
        })
      },
      {
        type: 'bar',
        stack: 'chart',
        silent: true,
        itemStyle: {
          color: '#eee'
        },
        data: Object.keys(builderJson.charts).map(function (key) {
          return builderJson.all - builderJson.charts[key];
        })
      },
      {
        type: 'bar',
        stack: 'component',
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: 3,
        label: {
          position: 'right',
          show: true
        },
        data: Object.keys(builderJson.components).map(function (key) {
          return builderJson.components[key];
        })
      },
      {
        type: 'bar',
        stack: 'component',
        silent: true,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
          color: '#eee'
        },
        data: Object.keys(builderJson.components).map(function (key) {
          return builderJson.all - builderJson.components[key];
        })
      },
      {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '25%'],
        data: Object.keys(downloadJson).map(function (key) {
          return {
            name: key.replace('.js', ''),
            value: downloadJson[key]
          };
        })
      },
      {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '75%'],
        data: Object.keys(themeJson).map(function (key) {
          return {
            name: key.replace('.js', ''),
            value: themeJson[key]
          };
        })
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<template>
  <div>
    <div ref="main" style="width: 100%; height: 400px"></div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<style scoped>
</style>

nextTick()函数

<script setup>
import {nextTick} from "vue";
console.log("===========> " + "渲染开始1" + " <===========")
nextTick(() => {
  console.log("===========> " + "nextTick回调执行时刻3" + " <===========")
})
console.log("===========> " + "渲染结束2" + " <===========")
</script>

<template>
  <div>
  </div>
</template>

<style scoped>
</style>