[JavaScript知识库]vue使用pinia (vue2/vue3)

pinia是什么？Pinia 是 Vue.js 的轻量级状态管理库

官方网站：Pinia

中文文档: ? 介绍 | Pinia 中文文档

pinia与vuex4

相同

• 是vue 官方 状态管理工具(作者是 Vue 核心团队成员）
• 是vue开发者工具支持pinia

不同

• pinia相比vuex4，对于vue3的 兼容性 更好

• pinia相比vuex4，具备完善的 类型推荐 ?=> 对 TS 支持很友好

• Pinia 的 API 设计非常接近 Vuex 5 的提案。
  ?
• vuex只能有一个根级别的状态, ?pinia 直接就可以定义多个根级别状态

pinia核心概念

• state: 状态

• actions: 修改状态（包括同步和异步，pinia中没有mutations）

• getters: 计算属性

一、使用

1. 安装pinia vue2/vue3 通用

yarn add pinia
# 或者使用 npm
npm install pinia

2.如果是脚手架的创建的项目可以在安装，会自动创建一个出一个实例，帮助你快速引入pinia

vue add vue-cli-plugin-pinia

3.使用 pinia
store/index.js

import {
  defineStore
} from 'pinia'

// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters

export const useCounterStore = defineStore('counter', {
  // data里中的数据
  state: () => ({
    count: 1
  }),
  // 计算属性
  getters: {
    double: state => state.count * 2
  },
  // 相当于 vue中的 methods 既可以写同步代码也可以写异步
  actions: {
    addCount () {
      this.count++
    }
  }
})

vue2:? ? Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div> pinia中的count值 {{count}}</div>
    <div>pinia中的计算属性 {{double}}</div>
    <button @click="addCount">count +1 </button>
    <button @click="getCount">拿到count的值</button>
  </div>
</template>

<script>

// @ is an alias to /src
import { mapState, mapActions } from 'pinia'
import { useCounterStore } from '@/store'
export default {
  name: 'Home',
  computed: {
    ...mapState(useCounterStore, ['count', 'double'])
  },
  methods: {
    ...mapActions(useCounterStore, ['addCount']),
    getCount () {
      console.log(this.count)
    }
  }

}
</script>

vue3?

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div> pinia中的count值 {{store.count}}</div>
    <div>pinia中的计算属性 {{store.double}}</div>
    <button @click="addCount">count +1 </button>
    <button @click="getCount">拿到count的值</button>
  </div>
</template>

<script >
import { useCounterStore } from '@/store'

export default {
  setup () {
    const store = useCounterStore()
    const addCount = () => {
      // 数据+1
      store.count++
      // 使用$patch 修改数据 好处是可以使用修改多个数据
      // store.$patch({
      //   count: store.count + 1
      // })
    }
    return { store, addCount }
  }
}
</script>

二、持久化 vue3/vue2通用

持久化插件：Pinia Plugin Persist

安装命令

npm  add pinia-plugin-persist

或

yarn add pinia-plugin-persist

vue2持久化

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia, PiniaVuePlugin } from 'pinia'
import VueCompositionAPI from '@vue/composition-api'
// 引入持久化组件  若不想持久化 可不使用
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(PiniaVuePlugin)
Vue.use(VueCompositionAPI)
Vue.config.productionTip = false

new Vue({
  router,
  pinia,
  render: h => h(App)
}).$mount('#app')

store/index.js

import {
  defineStore
} from 'pinia'

export const useCounterStore = defineStore('counter', {
  // data里中的数据
  state: () => ({
    count: 1
  }),
  persist: {
    enabled: true, // 开启本地存储
    strategies: [
      {
        key: 'counter1', // 修改当前存储的键名 若不修改则是上面的id
        storage: localStorage // 修改当前的存储方式，如果不填 则存储方式为sessionstorage
      }
    ]
  }
})

vue3持久化

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia, PiniaVuePlugin } from 'pinia'
import VueCompositionAPI from '@vue/composition-api'
// 引入持久化组件  若不想持久化 可不使用
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(PiniaVuePlugin)
Vue.use(VueCompositionAPI)
Vue.config.productionTip = false

new Vue({
  router,
  pinia,
  render: h => h(App)
}).$mount('#app')

store/index.js

import {
  defineStore
} from 'pinia'

export const useCounterStore = defineStore('counter', {
  // data里中的数据
  state: () => ({
    count: 1
  }),
  persist: {
    enabled: true, // 开启本地存储
    strategies: [
      {
        key: 'counter1', // 修改当前存储的键名 若不修改则是上面的id
        storage: localStorage // 修改当前的存储方式，如果不填 则存储方式为sessionstorage
      }
    ]
  }
})

三、storeToRefs

使用storeToRefs可以保证解构出来的数据也是响应式的。

在模板中使用数据时，要加上模块的名字，例如：

<template>
    <div>
        {{counter.count}}
    </div>
</template>

<script setup>
import { useCounterStore } from '@/store'
const counter = useCounterStore()
</script>

如果我们想省略counter 第一个思路 解构

<script setup>
import { useCounterStore } from '@/store'
const counter = useCounterStore()
const { count } = counter
</script>

如果直接从pinia中结构，会丢失响应式

storeToRefs

可以保证解构出来的数据也是响应式的。

const { state属性名1， state属性名2 } = storeToRefs(模块名)

使用

<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/store'
const counter = useCounterStore()
const { count } = storeToRefs(counter)
</script>

使用storeToRefs可以保证解构出来的数据也是响应式的

四、pinia模块化

src
├── store
│   ├── 模块1.js
│?? └── 模块2.js
├── pages
│?? ├── Home.vue
│?? └── Login.vue
└── main.js

在某个.vue中使用模块时，先import useXXXStore from './模块', 然后 const xxx = useXXXStore()，来使用。如果在导入第二个模块就需要写两次

import { useCounterStore } from '@/store/counter'
import { useCounterUser } from '@/store/user'
const counter = useCounterStore()
const counter = useCounterUser()

改进

在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

src
├── store
│?? ├── modules
│?? │?? ├── user.js
│?? │?? └── counter.js
│?? └── index.js        // 根store
├── pages
│?? └── 页面.vue
└── main.js

module/counter.js

import { defineStore } from 'pinia'

const useUserStore = defineStore('counter', {
  state: () => ({ count: 1 }),
  getters: {
    double: state => state.count * 2
  },
  actions: {
    addCount () {
      this.count++
    }
  },
  persist: {
    enabled: true
  }
})
export default useUserStore

store/index.js

// 1. 分别导入各个模块
import useCounterStore from './module/counter'
import useUserStore from './module/user'

// 2. 统一导出useStore方法
export default function useStore () {
  return {
    counter: useCounterStore(),
    user: useUserStore()
  }
}

store/user.js

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => ({ name: '奥特曼', age: 18 }),
  getters: {
    double: state => state.age * 2
  },
  actions: {
    editUserName () {
      this.name = '迪迦'
    }
  },
  persist: {
    enabled: true
  }
})

export default useUserStore

注意:?每个文件中的 defineStore(id,{}） 中的id不要重复 否则在index.js 调用时以第一次调用为准

组件中使用

<template>
    <div>
        {{count}} {{name}}
        <button @click="addCount">+1</button>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
// 导入工具函数
import useStore from '@/store'
// 解构一下
const { counter, user } = useStore()

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count } = storeToRefs(counter)
const { name } = storeToRefs(user)

const { addCount } = counter
</script>