Vue：数据仓库配置--Pinia

pinia作用

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

 

pinia安装

npm i pinia

 

创建文件夹store

//  store/index.js文件
import { defineStore } from 'pinia'
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
const useStore = defineStore('storeId', {
  // 这里易错语法:如果箭头函数直接指向返回值的同学  记得把返回的对象用小括号括起来
  state: () => {
    return {
      msg: 'hello'
    }
  }
})

 

//main.js文件
import { createPinia } from 'pinia'
let app=createApp(App)
app.use(createPinia())

 

在组件中使用

<script setup>
    import useStore from "../store/index.js"
    let store=useStore()
    console.log(store,msg)    
</script>

 

在组件中修改仓库状态

//修改仓库状态1:
<script setup>
    import useStore from "../store/index.js"
    let store=useStore()
    let fm=()=>{store.msg="666修改成功"}//store是一个响应性对象 因此可以修改并刷新
    let {msg}=store
    let fn=()=>{ msg="6666修改失败"} //解构之后修改是不行的,因为解构后msg为非响应式变量 同toRefs知识点
    
    //解决方案:利用toRefs把响应式对象的属性解构为响应性的变量
    import {toRefs} from "vue"
    import useStore from "../store/index.js"
    let store=useStore()
    let {msg}=toRefs(store)
    let fn=()=>{msg.value="6666修改成功啦"} //一定不要忘了value
</script>

//修改仓库状态2:
store.$reset()//将状态 重置 到其初始值


//修改仓库状态3:（推荐方法）
store.$patch({
  msg:"666修改成功",
  count:store.count+100,
})
store.$patch((state)=>{
    state.msg="666修改成功";
    state.count= state.count+100,
})
//问:$patch整体修改个单条修改的区别?
store.msg="666修改成功"
store.count=store.count+100
//答:状态刷新一次,可以批量修改

 

订阅修改

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('test', JSON.stringify(state))
})

 

Getter

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)

//store/index.js文件
export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

//组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

 

Actions

在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)

之所以提供这个功能 就是为了项目中的公共修改状态的业务统一

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++//1.有this
    },
    randomizeCounter(state) {//2.有参数   想用哪个用哪个
      state.counter = Math.round(100 * Math.random())
    },
    randomizeCounter(state) {
        //异步函数
        axios("/test").then(res=>{
             state.counter = res.data.length
        })  
    }
  },
})

//组件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }

 

模块化

一个文件一个小仓库,仓库之间可以相互访问数据 不同组件也可以访问任意小仓库数据

//store/car.js文件
export const car = defineStore('car', {
  state: () => ({
    counter: 0,
  }),
  actions: {
   
  }
})

//store/userinfo.js文件
export const userinfo = defineStore('userinfo', {
  state: () => ({
    counter: 0,
  }),
  actions: {
     fn(state){state.counter=100}
  }
})


//A组件可以用car,userinfo两个仓库的数据
import {car} from "@/store/car.js"
import {userinfo} from "@/store/userinfo.js"
let store1=car()
store1.counter
let store2=userinfo()
store2.counter


//car仓库使用userinfo仓库跟组件一样的使用方式
import {userinfo} from "@/store/userinfo.js"
let store2=userinfo()
store2.counter
store2.fn()