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

vue3 

二、持久化 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可以保证解构出来的数据也是响应式的。

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

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

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

storeToRefs

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

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

使用

使用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 调用时以第一次调用为准

组件中使用