vue3学习笔记—Pinia

安装Pinia

npm install pinia

定义Option Store

src\stores\index.js

import { defineStore } from 'pinia'

const useAgeStore = defineStore('AAAAA', {
  state:()=>{//data(){return{}} 防止数据污染
    return {age:30};
  },
  getters: {
    //相当于computed计算属性
    gettersAge(state){
      return state.age + 5 ;
    }
  },
  //vuex --->  actions(context,data){}
  actions: {
    //相当于methods
    addAge(){
      //this指向对应的store仓库 
      this.age++;
    },  
  }
})

 定义Setup Store

src\stores\index.js

import {computed,ref} from 'vue';

//Setup store
//setup(){return{}}
export const userCounterStore=defineStore('main',()=>{
  const counter=ref(30);//state
  const gettersCounter=computed(()=>{//getters
    return counter.value+5;
  })
  function addCounter(){//actions
    counter.value++;
  }
  return {counter,gettersCounter,addCounter}
})

src\views\HomeView.vue

<script setup>
import { useAgeStore, userCounterStore } from '../stores/index'
import { storeToRefs } from 'pinia';
const ageStore = useAgeStore();
const counterStore = userCounterStore();
// console.log(ageStore);
// console.log(counterStore);

const{counter,gettersCounter}=storeToRefs(counterStore);
const {addCounter} = counterStore;
</script>

<template>
  <main>
    <h2>{{ ageStore.age }}</h2>
    <h2>{{ ageStore.gettersAge }}</h2>
    <!-- vuex commit -->
    <button @click="ageStore.addAge">修改age值</button>

    <h2>{{ counter }}</h2>
    <h2>{{ gettersCounter }}</h2>
    <button @click="addCounter">修改counter值</button>
  </main>
</template>

state的基本使用

src\stores\index.js

import { defineStore } from 'pinia';

//Option Store
export const useAgeStore = defineStore('AAAAA', {
  state:()=>{
    //为了完整类型推理，推荐使用箭头函数  
    //在Pinia中，state被定义为一个返回初始状态的函数
    //这使得pinia可以同时支持服务端和客户端
    //data(){return{}} 防止数据污染（针对服务端）
    return {age:30,name:"张三",arr:[1,2,3,4]};
  },
  getters: {
    //相当于computed计算属性
    gettersAge(state){
      return state.age + 5 ;
    }
  },
  //vuex --->  actions(context,data){}
  actions: {
    //相当于methods
    addAge(){
      //this指向对应的store仓库 
      this.age++;
    },  
  }
});

src\viewsAboutView.vue

<script setup>
import { useAgeStore } from '../stores/index'
const ageStore = useAgeStore();
console.log(ageStore.age);
//修改state中的状态

function changeAge(){
//方式一,直接修改
// ageStore.age++;

//方式二，批量修改$patch(对象),建议使用
// ageStore.$patch({
//   age:40,
//   name:"张三丰",
//   arr:[...ageStore.arr,5]
// })

//方式三，批量修改$patch(函数)，强烈推荐
//state-->store中定义的state
ageStore.$patch((state)=>{
  state.age=40;
  state.name="张三丰";
  state.arr.push(5);
})

//方式四，逻辑比较复杂的时候，封装到actions中的函数
}
</script>

<template>
  <main>
    <h2>{{ ageStore.name }}</h2>
    <h2>{{ ageStore.age }}</h2>
    <h2>{{ ageStore.arr }}</h2>

    <!-- <h2>{{ ageStore.gettersAge }}</h2> -->
    <!-- vuex commit -->

    <button @click="changeAge">修改age值</button>
    
    <!-- 使用actions中的函数 -->
    <!-- <button @click="ageStore.addAge">修改age值</button> -->
  </main>
</template>

getter的基本使用

src\stores\index.js

getters: {
    //相当于computed计算属性
    //state-->store中定义的state,推荐箭头函数
    // gettersAge(state){
    //   return state.age + 5 ;
    // },

    //this-->指向store实例，不能对返回值自动推导
    // gettersAge(){
    //   return this.age+5;
    // },

    //访问其他getters,通过this，不能使用箭头函数
    // gettersName(state){
    //   return this.gettersAge+state.name;
    // },

    //向getters传递参数，返回函数的方式接受参数，和普通函数一样
    //没有缓存作用
    // gettersAge(state){
    //   return (data)=>state.age + data ;
    // },

    //访问其他的store中的getters
    gettersAge(state){
      const counterStore=userCounterStore();
      return state.age+counterStore.gettersCounter;
    }
  },

src\viewsAboutView.vue 

<script setup>
import { useAgeStore } from '../stores/index'
const ageStore = useAgeStore();
</script>

<template>
  <main>
    <h2>{{ ageStore.gettersAge }}</h2>

    <!-- vuex commit -->
    <button @click="changeAge">修改age值</button>
  </main>
</template>

action的基本使用

src\stores\index.js

import axios from "axios"


  actions: {
    //既可以处理同步，也可以处理异步
    //不能使用箭头函数，一定要使用普通函数
    //相当于methods-->data
    addAge() {
      //this指向对应的store仓库 
      this.age++;
    },

    //访问其他store中的actions
    async getList() {
      const counterStore = userCounterStore();
      if (counterStore.login()) {
        let res = await axios.get('地址');
        console.log(res);
      }

    }
  }

src\viewsAboutView.vue 

<script setup>
import { useAgeStore } from '../stores/index'
const ageStore = useAgeStore();
console.log(ageStore.age);
//修改state中的状态

function getData(){
  ageStore.getList()
};
</script>

<template>
  <main>
    <button @click="getData">获取数据</button>
  </main>
</template>

pinia和vuex的比较

1.pinia最重要的是，搭配 TypeScript一起使用时有非常可靠的类型推断支持
2.pinia 没有 mutations，而actions的使用不同，在actions中可以处理同步也可以处理异步，getters的使用是一致的,state与vue2中data是相似的
3.pinia 没有总出口全是模块化，需要定义模块名称，当多个模块需要协作的时候需要引入多个模块，vuex是有总入口的，在使用模块化的时候不需要引入多个模块
4.pinia 在修改状态的时候不需要通过其他api，vuex需要通过commit，dispatch去修改所以在语法上比vuex更容易理解和使用，灵活
5.pinia就是更好的vuex，建议在项目中可以直接使用它了，尤其是使用了TypeScript的项目。