Vue3+Vite+TypeScript+element Plus框架搭建过程（2）

代码地址，pinia分支：https://gitee.com/lsjWeiYi/vue3-frame/tree/pinia

本篇是为框架添加pinia状态管理模块，状态管理可以简单的理解成管理一些需要在组件之间进行交互的全局变量。pinia在其中充当一个管理者，提供一些方法来处理这些全局变量。

为什么不适用vuex呢？因为vuex对typeScript的支持不好。
配置过程：

1. 在package.json中引入依赖："pinia":"^2.0.11"
2. 在main.ts中启用pinia：

import { createPinia } from "pinia"
.....
app.use(createPinia()).mount("#app");  // 此处省略其他use

3. 在“src”下新建目录“store”，并新建index.ts:

import { defineStore } from 'pinia'

export const useStore = defineStore({
  id: 'test',
  state: () =>({
    name: '超级管理员'
  }),
    // getters，暂时用不上
    getters: {
        nameLength: (state) => state.name.length,
        }
})

到此就配置结束了，所以还是很简单的，接下来看看怎么使用：

使用

前面已经在state里里面 添加了全局变量（姑且理解为全局变量吧）“name”，为了方便，我直接改造App.vue，演示使用效果：

<template>
  <!-- 默认情况下，程序启动的入口就是显示这里的内容 -->
  <BaseHeader /> <!--导航 -->
  <img alt="Vue logo" class="element-plus-logo" src="./assets/logo.png" /> <!-- 显示两个图标 -->
  <p>
    <HelloWorld :msg="myStore.$state.name"/> <!--演示如何将参数传递给HelloWorld-->
  </p>
  <p><el-button type="primary" @click="add">点我</el-button></p> <!-- 点击改变state.name的值，看到helloWorld中值得变化-->
  <router-view/> <!--路由显示的位置，必须有这句，否则路由的内容是不会显示的，因为它不知道显示到哪去-->
</template>

<script setup lang="ts">
  import { useStore } from './store/index';
  const myStore = useStore();

  let testName:string=myStore.$state.name

  function add(){
    myStore.$patch({
      name: myStore.$state.name+"点击"
    })
  }
</script>

首先看这里：

<HelloWorld :msg="myStore.$state.name"/> <!--演示如何将参数传递给HelloWorld-->

这里是引用了HelloWorld 这个页面。其实HelloWorld 还能接受父附件传递的参数msg，而我传入的便是那个全局变量“name”。

然后我由定义了个按钮<el-button type="primary" @click="add">点我</el-button> 此按钮能改变那个全局变量的值，它通过调用add()方法，而add方法就在script中定义了：

  function add(){
    myStore.$patch({
      name: myStore.$state.name+"点击"
    })
  }

$patch就是改变值的方法，每次都在后面添加“点击”两个字。
我们打开网页测试下效果：

然后我点一下按钮：

后面就添加了两个字，多点几下看看：

这个效果还是很直观的，按钮仅仅是改变了变量的值，而他能直接反应到页面上，并没有刷新页面的过程。这个好像就是vue的特性。

状态管理暂时到这，这里仅仅是最基本的使用。