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

Question

我在 main.js 中进行 session 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

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

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

与 Vuex 不同，您不需要根 Pinia 存储。您可以在任何组件的设置方法中调用 useSomeStore()。每个商店都可以只是一个数据孤岛。 Pinia 商店可以引用其他 pinia 商店实例。如果您正在将一组 Vuex 存储迁移到 Pinia 并且需要保留旧的 Vuex 存储树，这可能特别有用。

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: {
    getStuff() { return this.param1 + this.param2; } 
  } 
  actions: {
    init(param1: string, param2: string) {
      this.param1 = param1
      this.param2 = param2
    },
    doStuff() {
      // use this.param1
    }    
  }
});

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

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

// Export store instances that can be shared between components ... 
export const useAlphaStore = createSomeStore('alpha', 'value1');
export const useBetaStore = createSomeStore('beta', 'value2');