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

Question

我正在进行会话 API 调用main.js，并使用响应中的值作为根存储的初始值。在 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 实例并在用户等待连接解析时向用户显示一些内容。因此，您可能会发现通过调用 DataService.getSession()（例如可以是异步的“SessionStore”操作）来访问或初始化存储会更简单。通常，组件=访问=>存储=访问=>服务。

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

1. 将参数传递给 getter 函数或操作。

export const useStore = defineStore('store1', {
  state: () => ({
    ...
  }),
  getters: {
    // return a function (curried)
    prop: (state) => (param1: string ...) => {
      // use state and param1
    }
  },
  actions: {
    action1(param1: string ... ) {
      // use 'this' as state and 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.使用工厂模式动态创建store实例

// 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');

Answer 2

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

\n

\n

1. 在您的商店中，导出一个函数，该函数接收会话数据作为参数并返回createPinia()（Vue 插件）。将会话数据缓存在模块变量中，以便稍后在定义存储时使用。

   \n
\n

2. 定义一个存储，将其初始化state为上面缓存的会话数据。

   \n
\n

3. 在 中main.js，将会话数据传递给步骤 1 中创建的函数，并使用 来安装插件app.use()。

   \n
\n

\n

// store.js\nimport { createPinia, defineStore } from \'pinia\'\n\n1\xef\xb8\x8f\xe2\x83\xa3\nlet initData = null\n\nexport const createStore = initStoreData => {\n  initData = { ...initStoreData }\n  return createPinia()\n}\n\nexport const useUserStore = defineStore(\'users\', {\n  state: () => initData, 2\xef\xb8\x8f\xe2\x83\xa3\n})\n

\n

// main.js\nimport { createApp } from \'vue\'\nimport App from \'./App.vue\'\nimport { createStore } from \'./store\'\nimport * as DataService from \'./data-service\'\n\nDataService.getSession().then(sessionData => {\n  createApp(App)\n    .use(createStore(sessionData)) 3\xef\xb8\x8f\xe2\x83\xa3\n    .mount(\'#app\')\n})\n

\n

演示

\n