Open sanlangguo opened 2 years ago
Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x
npm install pinia --save
// src/store/index
import { createPinia } from 'pinia'
const store = createPinia()
export default store
在 main.js 中引入并使用
import { createApp }from'vue' import App from './App.vue' import store from './store'
const app = createApp(App) app.use(store)
### 定义 state
// 在 src/store 下面创建一个user.js
import { defineStore } from 'pinia'
export const userStore = defineStore({ state: () => { return { name: '三郎过' } } })
### 获取 state
也可以结合 computed 获取
const name = computed(() => userStore.name)
state 也可以使用解构,但使用解构会使其失去响应式,这时候可以用 pinia 的 storeToRefs
import{ storeToRefs } from 'pinia' const { name } = storeToRefs(userStore)
### 修改 state
export const userStore = defineStore({ id: 'user', state: () => { return { name: '三郎过' } }, actions: { updateName(name) { this.name = name } } })
### getters Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用:
export const userStore = defineStore({ id: 'user', state: () => { return { name: '三郎' } }, getters: { fullName: (state) => { return state.name + '过' } } })
userStore.fullName // 张三丰
### action **异步 action** action 可以像写一个简单的函数一样支持 async/await 的语法,让你愉快的应付异步处理的场景。
export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) return data } } })
**action 间相互调用** action 间的相互调用,直接用 this 访问即可。
export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) this.setData(data) // 调用另一个 action 的方法 return data }, setData(data) { console.log(data) } } })
在 action 里调用其他 store 里的 action 也比较简单,引入对应的 store 后即可访问其内部的方法了
// src/store/user.js import { useAppStore } from './app' export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) const appStore = useAppStore() appStore.setData(data) // 调用 app store 里的 action 方法 return data } } })
// src/store/app.js export const useAppStore = defineStore({ id: 'app', actions: { setData(data) { console.log(data) } } })
### 数据持久化 * 安装 ```npm i pinia-plugin-persist --save``` * main.js引入
import { createApp, render, resolveComponent } from 'vue' import { createPinia } from 'pinia' // 持久化存储pinia import piniaPluginPersist from 'pinia-plugin-persist' import App from './App.vue' import router from './router/index' const store = createPinia() store.use(piniaPluginPersist)
createApp(App).use(router).use(store).mount('#app')
* store中的配置参数 persist
const useStore = defineStore('storeId', { state: () => { return { counter: 0, name: 'Eduardo', } }, persist: { enabled: true, // 自定义持久化参数 strategies: [ { // 自定义key key: 'storeId', // 自定义存储方式,默认sessionStorage storage: window.sessionStorage, // 指定要持久化的数据,默认所有 state 都会进行缓存,可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。 paths: ['counter', 'name'], } ] }, })
export { useStore }
pinia 上手指南
前沿
Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x
特点
开始
npm install pinia --save
创建 store
import { createPinia } from 'pinia'
const store = createPinia()
export default store
import { createApp }from'vue' import App from './App.vue' import store from './store'
const app = createApp(App) app.use(store)
// 在 src/store 下面创建一个user.js
import { defineStore } from 'pinia'
export const userStore = defineStore({ state: () => { return { name: '三郎过' } } })
const name = computed(() => userStore.name)
import{ storeToRefs } from 'pinia' const { name } = storeToRefs(userStore)
export const userStore = defineStore({ id: 'user', state: () => { return { name: '三郎过' } }, actions: { updateName(name) { this.name = name } } })
export const userStore = defineStore({ id: 'user', state: () => { return { name: '三郎' } }, getters: { fullName: (state) => { return state.name + '过' } } })
userStore.fullName // 张三丰
export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) return data } } })
export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) this.setData(data) // 调用另一个 action 的方法 return data }, setData(data) { console.log(data) } } })
// src/store/user.js import { useAppStore } from './app' export const userStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) const appStore = useAppStore() appStore.setData(data) // 调用 app store 里的 action 方法 return data } } })
// src/store/app.js export const useAppStore = defineStore({ id: 'app', actions: { setData(data) { console.log(data) } } })
import { createApp, render, resolveComponent } from 'vue' import { createPinia } from 'pinia' // 持久化存储pinia import piniaPluginPersist from 'pinia-plugin-persist' import App from './App.vue' import router from './router/index' const store = createPinia() store.use(piniaPluginPersist)
createApp(App).use(router).use(store).mount('#app')
import { defineStore } from 'pinia'
const useStore = defineStore('storeId', { state: () => { return { counter: 0, name: 'Eduardo', } }, persist: { enabled: true, // 自定义持久化参数 strategies: [ { // 自定义key key: 'storeId', // 自定义存储方式,默认sessionStorage storage: window.sessionStorage, // 指定要持久化的数据,默认所有 state 都会进行缓存,可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。 paths: ['counter', 'name'], } ] }, })
export { useStore }