【无标题】pinia(大菠萝)

pinia(大菠萝)

Pinia相对Vuex 优化了什么

Vue2 和 Vue3 都能支持
相比较Vuex放弃 Mutation ，只保留 state, getter 和 action ，简化状态管理库
支持 Vue3 的 Composition api
为 JS 用户提供适当的 TypeScript 支持
可以自己写一些插件对Pinia进行扩展
支持服务器端渲染

安装pinia

1.使用Vite就需要先初始化vite：

npm init vite@latest

2.初始化与启动项目

npm install
npm run dev

 3.pinia的安装

npm install pinia

属性

defineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
defineStore( ) 方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能。
actions属性： 对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

用Pinia的方式创建一个store

1.在main.ts文件里引入Pinia

import { createPinia } from 'pinia'

2.引入后，通过createPinia( )方法，得到pinia的实例，

var pinia =createPinia()
//创建实例
app.use(pinia)
//使用pinia

 3.本地存储  mian.js

import fwatchl from vue //导入监听方法

监听pinia的所有状态

watch(pinia,state.state=>{

sessionStoragesetltem('piniaState',SONstringify(state))

})

main.js 取值

piniastate.value =
JSON.parse(sessionStorage.getltem('piniaState')||'{}')
更新pinia所有状态

states/user.js  定义状态

export const useUserStore = defineStore(id.()=>{
// 定义state
const userInfo = ref({})
// 定义actions
function login(){}
// 导出
return {userlnfo,login}
})

views/HomeView.vue  使用状态

// 导入使用状态的方法

import fuseUserStore1 from '@/stores/user'

// 定义状态的实例

const userStore = useUserStore()

// 访问、更新状态

userStore.userlnfo

// 调用actons方法

userStore.login()