pinia的简单使用

1.安装

npm install pinia --save

2.使用

①.main.ts

//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()


app.use(pinia)

②.创建目录store->index.ts

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
    // 相当于data
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
          counter: 0,
          name: 'wxx',
        }
    },
    // 相当于计算属性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
    actions: {
        increment() {
          this.counter++
        },
        randomizeCounter() {
            setTimeout(() => {
                this.counter = Math.round(100 * Math.random())
            }, 0);
        },
    },
})

export default useMain;

③.页面取数据，调用

<template>
    <div>counter:{{counter}}</div>
    <div>doubleCount:{{doubleCount}}</div>
    <el-button @click="main.randomizeCounter()">counter(round)</el-button>
    <el-button type="primary" @click="main.increment()">counter++</el-button>
 
    <div>{{name}}</div>
    <el-button @click="amend()">修改</el-button><br/>
</template>
<script setup lang='ts'>
 
//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/index'
import { storeToRefs } from 'pinia';
// import { loginAPI } from '../../src/request/login'

// import { StatusAPI } from "../../src/request/login";
// // 调接口使用 方法一
//  let res= await loginAPI()
//  console.log('.../',res)

// //调接口方法二
// const search = async(val: IUseTableParam) => {
//     let res = await StatusAPI({
//         ...val,
//     })
//     console.log( "***" ,res);
//     let { list, pageNum, pageSize, total } = res.data
//     console.log(list, pageNum, pageSize, total);

// }

const main = useMain()
// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据，不过这我只用来渲染
let { counter,name ,doubleCount } = storeToRefs(main)
 
//（常用方法三种）
//常用方法一： 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()
 
 
// 常用方法二：修改数据
counter = 9
 
//常用方法三：
//进阶使用$patch，多个修改
const amend=()=>{
    main.$patch((state) => {
        state.counter += 10;
        state.name = 'ohou,wxx'
    })
}
 
</script>

<style scoped lang="sass">

</style>

这样，就可以上手操作啦，有问题欢迎留言