pinia学习+创建vue3项目

vue3创建项目

npm init vue@latest
然后写项目名称
进行插件安装 yes/no
npm i 
然后npm run dev  启动非常快

搭建pinia环境

1、npm install pinia
2、操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'

/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

创建store 组合式写法

1、sotre有三个概念：state、getter、action,相当于组件中的：data,computed,methods
项目中store 文件夹下counter.js

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})
//相当于定义了一个模块叫counter
//ref相当于state
//computed相当于getters
//function相当于actions
//不存在mutation  区别是actions支持异步

使用

<template>
<h1>{{countStore.count}}</h1>
<button @click="countStore.increment()">+1</button>
</template>
<script setup>
import { useCounterStore } from '../stores/couter'
const countStore = useCounterStore()
//拿到数据
//console.log(countStore.sum)
//console.log(countStore.$state.sum)
</script>

修改数据

1、直接修改

countStore.sum = 666

2、$patch直接修改

countStore.$patch({
	sum:999,
	school:'nihao'
})

3、借助actions修改（action中可以编写一些业务逻辑）
store/count.js

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  /*************/
  actions: {
    //加
    increment(value:number) {
      if (this.sum < 10) {
        //操作countStore中的sum
        this.sum += value
      }
    },
    //减
    decrement(value:number){
      if(this.sum > 1){
        this.sum -= value
      }
    }
  },
  /*************/
})

组件中直接调用

// 使用countStore
const countStore = useCountStore()
// 调用对应action
countStore.incrementOdd(n.value)

推荐修改state值用actions,不建议直接state.xx = 数据 也可以使用$patch

storeToRefs

想要使用store数据不用store.xxx
需要用到storeToRefs
storeToRefs只会关注store中的数据，不会对方法进行ref包裹

import { useTalkStore } from '@/stores/loveTalk'
import { storeToRefs } from 'pinia'
const talkStore = useTalkStore()
const { talkList } = storeToRefs(talkStore)
console.log('!!!!', storeToRefs(talkStore))

打印结果如下：

可见只把数据变成了ref

注意：为什么不用toRefs
原因如下：

import { useTalkStore } from '@/stores/loveTalk'
import { toRefs } from 'vue'
const talkStore = useTalkStore()
const { talkList } = toRefs(talkStore)
console.log('!!!!', toRefs(talkStore))

此时打印结果是
他把数据以及方法所有的都变成了ref，没有必要

getters

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{
    /************/
  },
  // 状态
  state(){
    return {
      sum:1,
      school:'atguigu'
    }
  },
  // 计算,两种写法
  getters:{
  	//第一种写法，箭头函数
    bigSum:(state):number => state.sum *10,
    //第二种写法：非箭头函数
    upperSchool():string{
      return this. school.toUpperCase()
    }
  }
})