Vite+Vue3+Pinia学习笔记

Posted 2022-11-26 前端薛小帅

项目中安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

// main.js中引入
import  createApp  from 'vue';
import App from './App.vue';
const app = createApp(App);

// vue使用pinia
import  createPinia  from "pinia"
app.use(createPinia());

定义store，渲染state

在 src 目录下新建 store 目录，store 目录下新建 demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:,
  actions:
)

在页面组件中渲染 state

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import  storeToRefs  from "pinia";
// 引入定义的store
import  demoStore  from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const  counter  = storeToRefs(store);
</script>

<template>
  <div>
    pinia测试counter
  </div>
</template>

<style lang="less" scoped>

</style>

修改state的几种方式

// 修改上面代码

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import  storeToRefs  from "pinia";
// 引入定义的store
import  demoStore  from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const  counter  = storeToRefs(store);

// 1.直接修改state
// const addCounter = () => store.counter ++;
// const reduceCounter = () => store.counter --;

// 2.$patch传递对象
const addCounter = () => 
  store.$patch(
    count:store.counter += 2,
    mobile:"13122222222"
  )
  store.getList();
;
const reduceCounter = () => 
  store.$patch(
    count:store.counter -= 2,
    mobile:"13122222222"
  )
;

// 3.$patch传递方法
// const addCounter = () => 
//   store.$patch(state => 
//     state.counter += 10
//   )
// ;
// const reduceCounter = () => 
//   store.$patch(state => 
//     state.counter -= 10
//   )
// ;

// 4.actions，查看下个代码片段
// 在actions中定义改变方法，组件通过store实例直接调用
// const addCounter = () => 
//   store.add(20);
// ;
// const reduceCounter = () => 
//   store.reduce(20)
// ;
</script>

<template>
  <div>
    pinia测试counter
    <button @click="addCounter">+</button>
    <button @click="reduceCounter">-</button>
  </div>
</template>

// 接上述代码片段4.actions修改state
// store/demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:,
  actions:
    // 4.改变state值
    add(n:number)
      this.counter += n;
    ,
    reduce(n:number)
      this.counter -= n;
    
  
)

Getters的使用

// store/demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:
    mobileHidden:(state):String => 
      return state.mobile.replace(/(\\d3)\\d4(\\d4)/g,`$1****$2`);
    
  ,
  actions:
    // 4.改变state值
    add(n:number)
      this.counter += n;
    ,
    reduce(n:number)
      this.counter -= n;
    
  
)

// 页面组件中使用同state

<script lang="ts" setup>
import  storeToRefs  from "pinia";
import  demoStore  from '@/store/demo';

const store = demoStore();
// 直接解构得出
const  counter,mobileHidden  = storeToRefs(store);
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试counter-mobileHidden
  </div>
</template>

<style lang="less" scoped>

</style>

store互调

在 store 目录下新建 test.ts 作为第二个 store

// store/test.ts

import  defineStore  from 'pinia';

export const testStore = defineStore('test', 
  state: () => 
    return 
      list:[1,2,3] as Array<number>
    
  ,
  getters:,
  actions:
)

// store/demo.ts

import  defineStore  from 'pinia';
// 引入testStore
import  testStore  from './test';
import  toRaw  from "vue";

export const demoStore = defineStore('demo', 
  state: () => 
    return 
  ,
  getters:,
  actions:
    // store互调
    getList()
        // 需要先将testStore调用实例化，然后读取里面state
        console.log(toRaw(testStore().list))
    
  
)

<script lang="ts" setup>
import  storeToRefs  from "pinia";
import  demoStore  from '@/store/demo';

const store = demoStore();
const  counter,mobileHidden  = storeToRefs(store);

const addCounter = () => 
  store.$patch(
    count:store.counter += 2,
    mobile:"13111111111"
  )
  // 直接调用demoStore.getList方法
  store.getList();
;
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试counter-mobileHidden 
    <button @click="addCounter">+</button>
  </div>
</template>