详解操作state(方法属性状态详解修改)「state操作命令」

state用来存放应用的初始状态数据，是store的核心功能。
创建state推荐使用箭头函数创建state，方便后续处理。

import { defineStore } from "pinia";/  User状态模块  @param $id users  @param options /export const useUsersStore = defineStore('users', {  state: () => {    return {      count: 0,      hasLogin: false,      list: []    }  }})

创建store以及state使用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中的状态值方法一、直接修改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操作详解以及本地持久化缓存