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: []
    }
  }
})

使用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 -> 1
hasLogin.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.js
import { createPinia } from 'pinia'

const pinia = createPinia()
export default pinia

// 在main.js中的导入并挂载pinia实例
// main.js
import { 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 来设置整个应用的初始 state
pinia.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 }
);