Pinia的使用

Pinia和Vuex区别

1.支持选项式api和组合式api的写法

2.pinia没有mutations,只有：state、getters、actions

3.pinia分模块不需要modules（Vuex分模块需要modules）

4.TypeScript支持很好

5。自动化代码拆分

6.pinia体积更小（性能更好）

如何使用Pinia

一 安装使用Pinia

1 安装下载

    yarn add pinia
    # or with npm
    npm install pinia

2 mian.js引入

   import { createPinia } from 'pinia'
   app.use(createPinia())

3 根目录新建store/index.js中写入

   import { defineStore } from 'pinia'
    export const useStore = defineStore('storeId', {
      state: () => {
        return {
          counter: 0,
        }
      },
      getters:{},
      actions:{}
    })

4 组件使用

   <script setup>
    import { useStore } from '../store'
    const store = useStore();
   </script>

二、 State

1.Pinia定义state数据

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  getters:{},
  actions:{}
})

2.组件使用Pinia的state数据

 <template>
<div>
	<h1>A组件</h1>
	{{ name }}
</div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>

3.组件修改pinia的state数据

本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store;这种解构是不可以的，所以要换解构的方式。

    <template>
        <div>
                <h1>A组件</h1>
                {{ name }}
                <button @click='btn'>按钮</button>
        </div>
    </template>
    <script setup>
    import { storeToRefs } from 'pinia'
    import { useStore } from '../store'
    const store = useStore();
    let { name }  = storeToRefs(store);
    const btn = ()=>{
            name.value = '123';
    }
    </script>
    
    

4.如果state数据需要批量更新

 store/index.js
 
import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      arr:['a','b','c']
    }
  },
  getters:{},
  actions:{}
})

组件代码

   <template>
        <div>
                <h1>A组件</h1>
                {{ name }}
                {{ counter }}
                {{ arr }}
                <button @click='btn'>按钮</button>
        </div>
        </template>
        <script setup>
        import { storeToRefs } from 'pinia'
        import { useStore } from '../store'
        const store = useStore();
        let { name,counter,arr }  = storeToRefs(store);
        const btn = ()=>{
                //批量更新
                store.$patch(state=>{
                        state.counter++;
                        state.arr.push(4);
                        state.name = '456';
                })
        }
        </script>

使用$patch进行批量更新

三、actions

actions就比较简单了，写入方法，比如我们可以让state中的某一个值+=，而且传入参数

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0
    }
  },
  getters:{},
  actions:{
        changeCounter( val ){
                this.counter += val;
        }
  }
})

组件

<template>
<div>
	<h1>A组件</h1>
	{{ counter }}
	<button @click='add'>加10</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter }  = storeToRefs(store);
const add = ()=>{
        store.changeCounter(10);
}
</script>

四、getters

getters和vuex的getters几乎类似，也是有缓存的机制

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{
        counterPar(  ){
                console.log(111);
                return this.counter + 100;
        }
  },
  actions:{}
})

组件

<template>
<div>
	{{ counterPar }}
	{{ counterPar }}
	{{ counterPar }}
	<h1>A组件</h1>
	{{ counter }}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar }  = storeToRefs(store);
</script>

Pinia持久化存储

一、安装插件

npm i pinia-plugin-persist --save

二、store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

三、store/user.js

export const useUserStore = defineStore({
  id: 'user',

  state: () => {
    return {
      name: '张三'
    }
  },

  // 开启数据缓存
  persist: {
    enabled: true
  }
})

四、自定义 key

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

五、持久化局部 state

 默认所有 state 都会进行缓存，你能够通过 paths 指定要长久化的字段，其余的则不会进行长久化。
 
 state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

Pinia怎么分模块？

 Pinia不需要像Vuex一样使用modules分模块，Pinia可在store目录中直接定义对应模块就可以了
 

一、目录结构

store/user.js
store/shop.js
...

二、store/user.js

import { defineStore } from 'pinia'

export const user = defineStore({
  id: 'user',
  state:()=>{
        return {
        userInfo:{
            nickName:'章三'
        },
        token:'xfdfdsjkdsj'
        }
  },
  getters:{

  },
  actions:{

  }

})

三、某组件使用

<template>
<div>
	<h1>A组件</h1>

{{ userInfo.nickName }}

</div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);
</script>