I use typed-vuex ,work without nuxt, I can not solve this error

346 Views Asked by At

I can not solve this error. error

"typed-vuex": "^0.2.0", "@vue/eslint-config-typescript": "7.0.0", "typescript": "~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,
});
1

There are 1 best solutions below

0
On
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
    }
  }