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;
			}
		}
	}


//父组件
 


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）

官网：安装 | Pinia

四、更新日志

20221229：初始化文档