state操作详解以及本地持久化存储

state用来存放应用得初始状态数据，是store得核心功能。

推荐使用箭头函数创建state，方便后续处理。

import { defineStore } from "pinia";export const useUsersStore = defineStore('users', { state: () => { return { count: 0, hasLogin: false, list: [] } }})

创建store以及state

storeToRefs方法可以从store中提取state中得属性值，并保持其响应性

import { useUsersStore } from '等/store/users.js'import { storeToRefs } from 'pinia'const usersStore = useUsersStore()// 获取state// storeToRefs可以从store中提取state中得属性值，并保持其响应性const { count, hasLogin, list } = storeToRefs(usersStore)console.log('count: ', count.value)console.log('hasLogin: ', hasLogin.value)

// 在template中使用<div class="sub">使用state</div><div class="p">count: {{ count }}</div><div class="p">hasLogin: {{ hasLogin }}</div><div class="p">list: {{ list }}</div>

使用state得结果

方法一、直接修改state中得属性值

需要挨个属性一一去做修改

import { useUsersStore } from '等/store/users.js'import { storeToRefs } from 'pinia'const usersStore = useUsersStore()// 获取state// storeToRefs可以从store中提取state中得属性值，并保持其响应性const { count, hasLogin } = storeToRefs(usersStore // 直接修改count.value ++ // 0 -> 1hasLogin.value = true // false -> true

方法二、使用store.$patch 方法

使用$patch方法得优点在于不管有多少条状态，它都是一次性更新完成

import { useUsersStore } from '等/store/users.js'import { storeToRefs } from 'pinia'const usersStore = useUsersStore()// 获取state// storeToRefs可以从store中提取state中得属性值，并保持其响应性const { count, hasLogin, list } = storeToRefs(usersStore // 参数传一个对象usersStore.$patch({ count: count.value - 5, hasLogin: !hasLogin.value})// 参数传递一个函数(推荐使用)usersStore.$patch(state => { state.list.push({test: 123}) state.hasLogin = !state.hasLogin})替换state

上面得修改state，只能修改state中得属性得值。有时候，我们会遇到整个替换state得需求，我们可以通过pinia.state.value = {}来实现。

// 首先，将pinia实例导出// store/index.jsimport { createPinia } from 'pinia'const pinia = createPinia()export default pinia

// 在main.js中得导入并挂载pinia实例// main.jsimport { createApp, watch } from 'vue'import App from './App.vue'import router from './router'// 导入pinia实例import pinia from '等/store/index.js'createApp(App).use(pinia).use(router).mount('#app')

// 在需要得地方使用import pinia from '等/store/index.js'// 通过变更 pinia 实例得 state 来设置整个应用得初始 statepinia.state.value = {}本地持久化缓存

方法一、使用store.$subscribe方法，一般在组件中使用，如果组件卸载，将被自动删除。如果想保留他们，需要新增一个参数 {detached: true}。

import { useUsersStore } from '等/store/users.js'const usersStore = useUsersStore()// 持久化焕春usersStore模块下得所有状态值usersStore.$subscribe((mutation, state) => {localStorage.setitem('usersStore', JSON.stringify(state))}, {detached: true})

方法二、使用watch监听state变化，实现持久化缓存

import pinia from '等/store/index.js'watch( pinia.state, (state) => { // 每当状态发生变化时，将整个 state 持久化到本地存储。 localStorage.setItem("piniaState", JSON.stringify(state)); }, { deep: true });

state操作详解以及本地持久化缓存