首页 前端知识 Vite Vue3 Pinia学习笔记

Vite Vue3 Pinia学习笔记

2024-06-06 00:06:00 前端知识 前端哥 690 339 我要收藏

项目中安装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(/(\d{3})\d{4}(\d{4})/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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10932.html
标签
vue3pinia
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!