配置方式

vue2 配置

  1. 安装 pinia
    • npm i pinia -S
  2. 安装 @vue/composition-api
    • npm i @vue/composition-api -S
  3. 打开入口文件 main.js
    1. 引入 pinia 和 @vue/composition-api
      1. import { createPinia, PiniaVuePlugin } from 'pinia'
      2. import VueCompositionAPI from '@vue/composition-api'
    2. 注册插件 PiniaVuePlugin 和 VueCompositionAPI
      1. Vue.use(PiniaVuePlugin)
      2. Vue.use(VueCompositionAPI)
    3. 创建 pinia 实例（创建根存储，传递给应用程序）
      • const pinia = createPinia()
    4. Vue 实例化配置项中添加 pinia
      • {pinia: pinia}
  4. src 目录下，创建 store 目录
    • 目录下创建 index.js 文件
      1. 引入 pinia
        • import { defineStore } from 'pinia'
      2. 调用 defineStore
        1. 参数1：容器ID，必须唯一
        2. 参数2：配置对象
          1. state：函数
            1. 存储组件状态（数据）
            2. 返回值为对象，定义初始值
          2. getters：对象
            1. 计算属性
          3. actions：对象
            1. 封装业务逻辑，修改 state
      3. 暴露 difineStore 函数调用返回值

项目如果是使用 Vue CLI 构建，调用命令 vue add vue-cli-plugin-pinia ，使用第三方插件，一步完成上述所有操作 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { createPinia, PiniaVuePlugin } from 'pinia'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()
Vue.use(VueCompositionAPI)

new Vue({
  render: h => h(App),

  pinia

}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: state => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

vue3 配置

  1. 安装 pinia
    • npm i pinia -S
  2. 打开入口文件 main.js
    1. 引入 pinia
      • import { createPinia } from 'pinia'
    2. 注册插件（创建根存储，传递给应用程序）
      • app.use(createPinia())
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        // main.js  main.ts

        import { createApp } from "vue"
        import App from "./App.vue"
        import { createPinia } from "pinia"

        const app = createApp(App)

        // 创建pinia实例
        const pinia = createPinia()

        // 挂载到 vue 根实例
        app.use(pinia)

        app.mount("#app")
  3. src 目录下，创建 store 目录
    • 目录下创建 index.js 文件
      1. 引入 pinia
        • import { defineStore } from 'pinia'
      2. 调用 defineStore
        1. 参数1：容器ID，必须唯一
        2. 参数2：配置对象
          1. state：函数
            1. 存储组件状态（数据）
            2. 返回值为对象，定义初始值
          2. getters：对象
            1. 计算属性
          3. actions：对象
            1. 封装业务逻辑，修改 state
      3. 暴露 difineStore 函数调用返回值
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        // sotre -> index.js(ts)

        import { defineStore } from "pinia"

        // 定义并导出容器（多次调用此函数，返回同一对象）
        // 参数1：容器ID。多个容器通过此参数区分获取
        // 参数2：配置项
        export const myStore = defineStore("main",{
           // 类似组件的 data ，用来存储全局状态
           // 必须是箭头函数，用于类型检测和防止服务端渲染的数据影响
           state:()=>{
              return {
                 a:100,
                 b:200
              }
           },

           // 类似组件的 computed ，用来封装计算属性
           // 有缓存功能，多次调用只计算一次
           // 一个可选参数：表示 sate 实例
           // 如果使用 this 获取 state 实例，则必须指定返回值类型
           getters:{
              updated(state){
                 return state.a + 10
              }
              updated2():number{
                 return this.a + 10
              }
           },

           // 类似组件 methods 封装业务逻辑。不能定义箭头函数，this 会发生改变，this 指向 store 实例
           actions:{
              checkdata(){
                 this.a = 6
              }
           }
        })

使用数据

获取数据

直接获取数据

  1. 引入 store 生成函数
  2. 通过 store 生成函数获取唯一实例（多次调用返回同一实例）
  3. 通过 store 实例获取数据
1
2
3
4
5
6
// .vue

import { myStore } from "../store"

let store = myStore()      // 函数返回唯一实例（多次调用返回同一实例）
let name = store.a    // 值是响应式的

结构赋值数据

作用
  1. 基本类型数据如果直接进行结构赋值，则变量接收的就是值的副本。使用函数 storeToRefs 处理 store 实例，返回值再进行结构赋值，赋值的变量是一个动态响应并且指向 store 中属性的数据。（效果等同与 vue3 API toRefs）
  2. 只能处理 store 实例
  3. 只处理 store 第一层数据
用法
  1. 引入 storeToRefs 函数
  2. 获取 store 唯一实例
  3. 通过 storeToRefs 函数处理 store 实例
  4. 对处理对象进行解构赋值
1
2
3
4
5
6
7
8
// .vue

import { myStore } from "../store"
import { storeToRefs } from "pinia"

let store = myStore() // 生成 store 实例
//let { a } = store;    // 可以获取到数据，但不是响应式的
let { a,b } = storeToRefs(store) // 对处理后的 store 实例对象进行解构赋值

调用函数

1
2
3
4
5
import { myStore } from "../store"

let store = myStore() // 生成 store 实例

store.checkdata()    // 调用函数

修改数据

  1. 单个数据对获取的数据进行赋值即可
  2. 多个数据修改，需要使用 store 实例的 $patch 函数进行批量赋值
对象参数 
1
2
3
4
5
6
7
import { myStore } from "../store"

let store = myStore()

store.$patch({
   a:mystore.a+1     // 对数据进行增加
})
回调参数 
1
2
3
4
5
6
7
import { myStore } from "../store"

let store = myStore()

store.$patch(state=>{
   state.a++      // 对数据进行增加
})

重置数据

store中的数据会变为初始状态，页面也会更新

1
store.$reset();

直接替换整个state

将我们提前声明的state替换为新的对象

1
store.$state = { counter: 666, name: '张三' }

多个页面使用 store

  1. 根目录下 store 目录中可以创建多个 .js 或 .ts 文件，每个文件都可以定义暴露 defineStore 函数
  2. 不同 .vue 文件引入此模块，获取唯一 store 实例，即可获取或给数据赋值，实现多页面数据共享