首页 > 解决方案 > 自定义 vue 包可以导出 Vuex 状态的片段,然后可以在 Laravel 项目的 Vuex 状态中导入/使用

问题描述

嘿 Stackoverflow 社区!

我有一个关于 Laravel/Vue 项目中的 Vuex 的问题,这也是导入自定义 Vue 组件库/包。

我想让我们的包导出与我们的包特别相关的某些 Vuex 状态(状态、突变、吸气剂等)。

我希望这些作品与我们的 Laravel 项目的 Vuex 实例一起使用。希望这将允许项目在一个 Vuex 实例中使用自定义包中的状态片段,以及特定于 Laravel 项目的状态片段。

这是可能的,甚至是一个好方法吗?该包旨在可重用并且不是特定于项目的,但如果 Laravel 项目可以从其自己的 Vuex 状态读取/操作/交互包状态,那将是理想的。

以下是一些相关的代码片段:

自定义组件库- main.js

import ExampleComponent from './components/ExampleComponent.vue'
import AnotherComponent from './components/AnotherComponent.vue'

export {
  ExampleComponent,
  AnotherComponent
}

Laravel 项目- app.js

import {ExampleComponent, AnotherComponent} from 'vue-components-library'

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      filterData: {
        page: 1
      },
      fetchResultsFlag: 0
    },
    mutations: {
      updateFilterData: (state, filterData) => {
        Object.entries(filterData).forEach(([key, value]) => {
          state.filterData[key] = value
        });
        state.fetchResultsFlag = 1
      },
      incrementPage: (state) => {
        state.filterData.page++
        state.fetchResultsFlag = 1
      },
      resetFetchResultsFlag: (state) => {
        state.fetchResultsFlag = 0
      }
    },
    getters: {
      filterData: state => {
        return state.filterData
      },
      fetchResultsFlag: state => {
        return state.fetchResultsFlag
      },
      page: state => {
        return state.filterData.page
      }
    }
  })

const app = new Vue({
    el: '#app',
    store: store
});

非常感谢任何帮助或见解!

谢谢。

标签: laravelvue.jsvuejs2statevuex

解决方案


推荐阅读