vue3 +TS 安装使用pinia状态管理

目录

一.安装

1.下载安装依赖

2.创建src/stores/index.ts文件

3.创建src/stores/states.ts文件

4.创建src/stores/interface/index.ts文件

5.修改main.ts

6.目录结构如下

7.测试使用

8.去到首页点击按钮，打开控制台查看

---

一.安装

1.下载安装依赖

npm install pinia

2.创建src/stores/index.ts文件

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

// 导出
export default pinia;

3.创建src/stores/states.ts文件

// 在 src/store/index.js 中创建一个简单的 store
import { defineStore } from 'pinia'
import { UserInfoState } from "./interface/index"

interface State {
  userForm: UserInfoState;
}

export const useMyStore = defineStore('myStore', {
  state: (): State => ({
    userForm: {
      user: '',
      ID: '',
      age: '',
      sex: ''
    },
    // 其他状态
  }),
  actions: {
    // 动作
    setUserInfo(data:UserInfoState) {
      this.userForm = data
    },

  },
})

4.创建src/stores/interface/index.ts文件

// 示例
export interface UserInfoState {
	user:string;
  ID:string;
  age:string | number ;
  sex:string
} 

5.修改main.ts

添加内容

import pinia from "./stores/index"
app.use(pinia)

最后如下

import { createApp } from 'vue'
import '@/assets/style/index.css'
import App from './App.vue'

// 以下是 完整引入 element plus 时使用
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'


// 引入图标库，如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 导入新建的路由文件
import router from "./router/index"

import pinia from "./stores/index"


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


// 以下是 完整引入 element plus 时使用
// app.use(ElementPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

6.目录结构如下

7.测试使用

来到home/index.vue页面

新增测试代码

import { useMyStore } from "@/stores/states"
import { UserInfoState } from '@/stores/interface';

const useStore = useMyStore()
const testUseStore = () => {
  let data: UserInfoState = {
    user: 'admin',
    ID: '12345',
    age: '18',
    sex: '男'
  }
  useStore.setUserInfo(data)
  console.log(useStore.userForm);
}

最后home/index.vue页面代码

8.去到首页点击按钮，打开控制台查看