vue+vite+pinia使用

一、安装 vite项目

1.创建项目：npm create vite@latest
2.运行项目：

//进入项目文件后执行

npm install  //安装

npm run dev  //运行

官网：开始 | Vite 官方中文文档

二、vue使用案例

1.父组件调用子组件（this.$refs.），通过ref定义子组件的名字，从而使用this.$refs.进调用子组件方法

//子组件 TableUI

export default {
		props:[],
		data() {
			return {
		},
		methods: {

			upcolumns(columnsData){
				this.columns=columnsData;
			}
		}
	}


//父组件
<TableUI ref="TableUI"></TableUI> 


import TableUI from './TableUI.vue'
export default {

		methods: {
			selectMenu(indexData) {
                //使用
				this.$refs.TableUI.upcolumns(this.tableUIData[indexData].columns);
			}
		}
	}

三、Pinia使用

1.安装

npm install pinia

2.使用

需要先安装path为了方便使用:npm install path --save

在src下创建目录：src/store/index.js，内容如下：

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // 推荐使用 完整类型推断的箭头函数
    state: () => {
        return {
            // 所有这些属性都将自动推断其类型
            name: "pinia使用",
        };
    },
})

3.在需要使用的组件下调用（this.store）

	import {
		useStore
	} from '@/store/index'
	export default {
		setup() {
			const store = useStore()

			return {
				// 您可以返回整个 store 实例以在模板中使用它
				store,
			}
		},

		data() {
			return {

			}
		},
		computed: {

		},
		methods: {

			selectMenu(indexData) {
                //使用
            console.log(this.store)
			}
		}
	}

4.全局实时绑定和变化，A组件改变B组件的pinia的数据，B组件会实时更新数据。

5.数据变化订阅（store.$subscribe）

<script>
	import {
		useStore
	} from '@/store/index'
	export default {
		setup() {
			const store = useStore()
            //订阅数据变化
			const subscribe = store.$subscribe((mutation, state) => {
				/*
				* mutation主要包含三个属性值：
				*   events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
				*   storeId：是当前store的id
				*   type：用于记录这次数据变化是通过什么途径，主要有三个分别是
				*         “direct” ：通过 action 变化的
				          ”patch object“ ：通过 $patch 传递对象的方式改变的
				          “patch function” ：通过 $patch 传递函数的方式改变的
				*
				* */
				// 我们就可以在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的
				console.log(mutation)
				console.log(state)
			}, {
				detached: false
			})
			
			return {
				// 您可以返回整个 store 实例以在模板中使用它
				store,
			}
		},
		props: [],
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

官网：安装 | Pinia

四、更新日志

20221229：初始化文档