Vue.js Pinia+Vue 3状态react 性StoreToRef的替代方案

发布于10月29日

我有以下useLocations.js首曲子:

export const useLocations = defineStore('useLocations', () => {
    const state = reactive({
        data: 1
    })

    const update = () => {
        state.data = 2
    }

    return {
        ...toRefs(state),
        update
    }
})

我在我的locations.vue组件中访问它，如下所示:

const { data, update } = useLocations
update()
console.log(data) // 1

我希望console.log(data)是2而不是1

我试着像这样访问store ，这确实有效:

const store = useLocations()
const { data } = storeToRefs(store)
const { update } = store
update()
console.log(data) // 2

但是我想要一个没有storeToRefs的解决方案，我不明白为什么组合中的toRefs不起作用.

根据Vue文档https://vuejs.org/api/reactivity-utilities.html#torefs，这正是我的场景，react 性不知何故中断了.

我想要一个没有storeToRefs的解决方案，这样我就可以避免在我的组件中调用两次存储，一次是针对状态，一次是针对操作.

const storeToRefsWithActions = store => ({ ...storeToRefs(store), ...Object.fromEntries( Object.entries(store) .filter( ([key, val]) => !key.startsWith('$') && typeof val === 'function' ) ) })

Vue.js Pinia+Vue 3状态react 性StoreToRef的替代方案

推荐答案

Vue.js相关问答推荐

Vue 3 需要 main.js 中的文件

Vue 3 在一个值更改问题后再次重新渲染每一行

纵横比元素溢出容器

如何使用 vue 或 javascript 向服务器发送密码？

Vuex 和 Event Bus 有什么区别？

如何在 Vue 中编译从外部 api 加载的模板

Vuejs中的条件a href

根据 URL 有条件地隐藏视图组件

将 props 传递给 Vue 组件中的元素属性

如何在 Vue.js 中传递 $router.push 中的数据？

使用 vue-test-utils 配置过滤器

数据更新后触发 Vue.js 事件

将 Vuetify 从 1.5 升级到 2 时，Sass-loader 错误 'options has an unknown property 'indentedSyntax''

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性？

取消选中单选按钮

使用 nuxt，如何将路由名称放在页面标题中？

依赖关系甚至在 package.json 和 node_modules 中都没有定义

如何在 Promise 回调中更新 Vue 应用程序或组件的属性？

NPM：403 禁止 - PUT http：//registry.npmjs.org/[package-name] - 禁止

返回 VueJS 方法的Native Code消息