如何将参数传递给 Pinia 商店？

Question

我正在 main.js 中进行会话 API 调用，并将响应中的值用作我的根存储的初始值。在 vuex 中是这样处理的，

DataService.getSession()
  .then((sessionData) => {
    new Vue({
      i18n,
      router,
      // this params sessionData.session will be passed to my root store
      store: store(sessionData.session),
      render: (h) => h(App),
    }).$mount('#app');
  })

消费喜欢，

export default function store(sessionData) { // here I'm getting the sessionData
  return new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state: {
      // some states here
    },
  });
}

在 Pinia 的情况下，我们正在创建一个应用程序实例并让它像这样使用， app.use(createPinia())

我的商店会像，

// how to get that sessionData here
import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  })
})

是否可以将 sessionData 以某种方式传递给 pinia 商店？

Answer 1

当您使用 defineStore() 在 Pinia 中创建商店时，您会为其提供初始状态。所以无论你做什么，只要将数据传递给它然后做

defineStore('name', {
    state: () => {
        isAdmin: session.isAdmin,
        someConstant: 17
    },
    actions: { ... }
});

Answer 2

您可以在您的商店中缓存会话数据，并用它初始化商店的数据：

在您的商店中，导出一个接收会话数据作为参数的函数和 returns createPinia()（一个 Vue 插件）。将会话数据缓存在模块变量中，以便稍后在定义商店时使用。
定义一个存储，将其 state 初始化为上面缓存的会话数据。
在main.js中，将session数据传给第1步创建的函数，用app.use().
安装插件

// store.js
import { createPinia, defineStore } from 'pinia'

1️⃣
let initData = null

export const createStore = initStoreData => {
  initData = { ...initStoreData }
  return createPinia()
}

export const useUserStore = defineStore('users', {
  state: () => initData, 2️⃣
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from './store'
import * as DataService from './data-service'

DataService.getSession().then(sessionData => {
  createApp(App)
    .use(createStore(sessionData)) 3️⃣
    .mount('#app')
})

demo

Answer 3

有 3 种方法可以将参数传递给 Pinia 商店 - 请参阅下面的列表。您可以使用 #2 或 #3 .

在大多数情况下，初始化您的 Vue 实例并在用户等待连接解析时向他们显示一些内容是明智的。因此，您可能会发现通过在可以异步的“SessionStore”操作中调用 DataService.getSession() 来访问或初始化存储更简单。通常组件 =access=> 商店 =access=> 服务。

与 Vuex 不同，您不需要根 Pinia 存储。您可以在任何组件的设置方法中调用 useSomeStore()。每个商店都可以是一个数据孤岛。

1。将通用参数传递给每个操作。

export const useStore = defineStore('store1', {
  state: () => ({
    ...
  }),
  actions: {
    action1(param1: string ... ) {
      // use param1
    }    
  }
});

2。创建后初始化商店

仅当需要此商店的一个实例时才有效

export const useStepStore = defineStore('store2', {
  state: () => ({
    param1: undefined | String,
    param2: undefined | String,
    ...
  }),
  getters: {
    geStuff() { return this.param1 + this.param2; } 
  } 
  actions: {
    init(param1: string, param2: string) {
      this.param1 = param1
      this.param2 = param2
    },
    doStuff() {
      // use this.param1
    }    
  }
});

3。动态创建商店实例的工厂模式

export function useStore(storeId: string, param1: string ...) {
  return defineStore(storeId, () => {
    // Use param1 anywhere
  })()
}

如何将参数传递给 Pinia 商店？

How to pass an argument to Pinia store?

vuex

vuejs3

pinia

1。将通用参数传递给每个操作。

2。创建后初始化商店

3。动态创建商店实例的工厂模式