【问题标题】:I use typed-vuex ,work without nuxt, I can not solve this error我使用 typed-vuex ,没有 nuxt 工作,我无法解决这个错误
【发布时间】:2021-09-13 18:03:00
【问题描述】:

我无法解决这个错误。

"typed-vuex": "^0.2.0", "@vue/eslint-config-typescript": "7.0.0", "打字稿": "~4.1.5",

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

import { actionTree, getterTree, mutationTree } from 'typed-vuex'
import { vuexfireMutations, firebaseAction } from 'vuexfire'
import { db } from "../plugins/firebase/initializationApp"
import ProductType from "../components/ProguctCard.vue"
import 'firebase/database'

Vue.use(Vuex)

export const state = () => ({
    products: [] as ProductType[],
});

export const getters = getterTree(state, {
    getProducts: state => state.products,
});

export const mutations = mutationTree(state, {
    ...vuexfireMutations,
})

export const actions = actionTree(
    { state, getters, mutations },
    {
        bindProducts: firebaseAction(({ bindFirebaseRef }) => {  < ERROR IS THIS  LINE
            // return the promise returned by `bindFirebaseRef`
            return bindFirebaseRef('products', db.ref('products'))
        }),
    }
)

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
});

【问题讨论】:

    标签: typescript vue.js firebase-realtime-database vuexfire


    【解决方案1】:
    import Vuex, { Store } from 'vuex'
    import Vue from 'vue'
    
    import { actionTree, getterTree, mutationTree, useAccessor } from 'typed-vuex'
    import { vuexfireMutations, firebaseAction } from 'vuexfire'
    import { db } from "../plugins/firebase/initializationApp"
    import { ProductType } from '@/models/product'
    import firebase from 'firebase/app';
    
    Vue.use(Vuex)
    
    const state = () => ({
        products: [] as ProductType[],
    });
    
    const getters = getterTree(state, {
        getProducts: state => state.products,
    });
    
    const mutations = mutationTree(state, {
    
    })
    
    const actions = actionTree(
        { state, getters, mutations },
        {
            bindProducts: firebaseAction(({ bindFirebaseRef }) => {
                return bindFirebaseRef('products', db.ref('products'))
            }) as (this: Store<any>) => ф,
        }
    )
    
    const store = new Vuex.Store({
        state,
        getters,
        actions: {
            ...actions,
            bindProducts: firebaseAction(({ bindFirebaseRef }) => {
                return bindFirebaseRef('products', db.ref('products'))
            })
        },
        mutations: {
            ...vuexfireMutations,
            ...mutations
        },
    })
    
    const storePattern = {
        state,
        getters,
        mutations,
        actions
    }
    
    export const accessor = useAccessor(store, storePattern)
    
    Vue.prototype.$accessor = accessor
    
    export default store
    
    declare module 'vue/types/vue' {
        interface Vue {
            $accessor: typeof accessor
        }
      }
    

    【讨论】:

      猜你喜欢
      • 2021-06-16
      • 1970-01-01
      • 2021-05-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-12-13
      • 1970-01-01
      相关资源
      最近更新 更多