vue3 集中式状态（数据）管理 pinia

1.安装pinia：  

npm i pinia 

2.在main.ts里面引入pinia：

import {createPinia} from 'pinia'

3.创建pinia：

const pinia=createPinia()

4.使用pinia:

app.use(pinia)

main.js整体代码如下：

import {createApp} from 'vue'
// import './style.css'
import App from './App.vue'
// 引入pinia
import {createPinia} from "pinia";

const app=createApp(App)
// 创建pinia
const pinia = createPinia()
// 安装pinia
app.use(pinia)
app.mount('#app')

———————————————————————————————————————————

———————————————————————————————————————————pinia相当于一个大的数据存储中心，写在src—>store文件夹下； 

5.存储和读取pinia中的数据

在store文件夹下创建.ts文件用来存储vue组件用到的数据：

import {defineStore} from "pinia";

export const useCountstore = defineStore('count', {
    //真正存储数据的地方
    state() {
        return {
            sum: 6,
            a:0,
            b:{
                c:1,
                d:2
            }
        }
    }
})

在组件内读取pinia的数据，首先导入store下的.ts文件，获取pinia仓库下保存的数据：

import {useCountstore} from '../store/count'

const countStore =useCountstore()
// countStore是reactive响应式对象  里面包裹的sum是ref对象，这种情况直接countStore.sum就可以拿到值 不需要.value
console.log(countStore,countStore.sum,countStore.a,countStore.b.c)
// 也可以通过 $state拿sum
console.log(countStore,countStore.$state.sum)

6.修改pinia数据

6.1直接修改数据值

//方法一 （直接拿到，直接改）
countStore.sum=10000000

6.2$patch碎片式修改

//方法二 （拿到碎片 对应改）
  countStore.$patch({
    sum:10000000,
    a:1,
    b:{
      c:0,
      d:0
    }
  })

6.3  pinia仓库添加actions，组件调用actions里面的方法

//action里面放置的是一个一个方法 用于响应组件的动作
    actions:{
        increase(value:number){
            console.log('increase方法被调用了',value)
            // 修改数据 this是当前的store
            this.sum+=value

        }

    }

//方法三
  countStore.increase(n.value)

拓展：（storeToRefs）

可以使用仓库的torefs进行解构赋值，直接在模板中进行引用，这样只会拿到组件对应仓库的数据，不会拿到方法等一堆东西：

    <h2>当前求和为：{{sum}},当前a,c,d值为：{{a}}、{{b.c}}、{{b.d}}</h2>

//解构赋值  将countStore的数据拿出来 通过storetorefs
const{sum,a,b}=storeToRefs(countStore)

7.getters对数据仓库的数据进行加工

在store->.ts文件下，写getters，类比actions

//getters方法对数据仓库进行加工
    getters:{
        bigSum():number{
            return this.sum*10
        }
    }

在组件中，可以直接解构赋值使用，也可以逐步解析使用：

//解构赋值  将countStore的数据拿出来 通过storetorefs
const{sum,a,b,bigSum}=storeToRefs(countStore)
console.log(countStore.bigSum)

8.$subscribe 等同于 pinia仓库的监视器

talkstore.$subscribe((mutate, state) => {
  // mutate存储变化了的数据   state真正的数据（有用）
  console.log('talkstore里面保存的数据发生变化', mutate, state)
  //设置浏览器本地存储 将列表转化成json格式
  // JSON.stringify() 函数用于将 JavaScript 对象或值转换为 JSON 字符串
  localStorage.setItem('talklist',JSON.stringify(state.talklist))

})

在组件对应的仓库内，获取本地浏览器存储的数据，持久化数据：

//真正存储数据的地方
    state() {
        return {
            // JSON.parse() 函数用于将 JSON 字符串转换为 JavaScript 对象
            talklist: JSON.parse(localStorage.getItem('talklist') as string) || []
        }
    }

获取到的talklist将一直被保存下来；