pinia

官网

https://pinia.vuejs.org/zh/getting-started.html

安装

npm install pinia

在main.js中导入pinia

//导入pinia
import {createPinia} from 'pinia'

//挂载pinia
createApp(App).use(createPinia()).mount('#app')

定义store

在深入研究核心概念之前，我们得知道 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字

import { defineStore } from 'pinia'

//1.定义并导出容器
参数1：**容器的ID**，必须唯一，将来pinia会把所有的容器挂载到容器
参数2：选项对象

export const useMainStore=defineStore('main',{
//state类似于data,用来存储全局状态
//state必须是箭头函数，是函数是因为避免在服务端渲染的时候交叉请求导致数据状态污染，形成闭包，箭头函数是因为更好的类型推导

  state:()=>{
   return {
   count:0
   }
  },
 	//类似于组件的的computed,用来封装计算属性，有缓存的功能
    getters:{}.
     //类似于组件的methods,封装业务逻辑，修改state,不能使用箭头函数定义actions,因为箭头函数绑定外部this
    actions:{}

  })

使用

state的使用

import { useMainStore} from './index'
const mainStore = useMainStore();
console.log(mainStore.count)

注意

如果将数据解构出来，数据就不是响应式的，但是会显示
import { useMainStore} from './index'
const mainStore = useMainStore();

const { count} = mainStore;  
console.log(count)  //修改count值但是这里不会变 

const handleChange=()=>{
mainStore.count++            
}


//解决方法
import {storeToRefs} from 'pinia'
import { useMainStore} from './index'
const mainStore = useMainStore();

const { count} =storeToRefs(mainStore)

这样解构出来的数据就是响应式的了

修改方式

方式一：最简单的方法

mainStore.count++

方式二 ：如果修改多个数据，建议使用$patch 批量更新 内部进行了性能优化  
mainStore.$patch({
		count:mainStore.count+1,
		foo:'hello'，
		arr:[...mainStore.arr,4]
})

方式三：更好的批量更新的方式：$patch 是一个函数，批量更新
mainStore.$patch(state=>{
state.count++
state.foo='hello'
state.arr.push(4)
})

方法四：在actions中修改state中的值
actions：{
changeState(num:number){
this.count=this.count+num

或者
this.$patch(state=>{
state.count=state.count+num
})
}
}

在使用的地方直接
mainStore.changeState(10)

getters使用方法

getters:{
	count10(state){
		console.log('count10')
		return state.count+10
								}
				}