pinia使用函数式写法,在vueDev浏览器开发者工具中,state中不显示store里的值

文章讲述了在使用Vue.js的defineStore函数定义Category状态管理时,由于非响应式数据导致state中不显示数据的问题。通过将c1Arr转换为ref对象使其响应式,解决了这个问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

let useCategoryStore = defineStore('Category', () => {
    let c1Arr: any = []

    const increment1 = computed(()=>{
        return console.log(c1Arr.value);
    })
    const increment2 = computed(()=>{
        return console.log(c1Arr.value);
    })

    return {
        c1Arr,
        increment1,
        increment2
    }
})

如图所示,state中不显示数据

查阅官方文档后可知,函数式写法中,属性需为响应式数据

let c1Arr: any = ref([])

将数据更改为响应式数据后解决

### PiniaVuex 的对比分析 #### 功能特性 PiniaVuex 都是用于管理 Vue.js 应用程序状态的标准库[^1]。然而,在具体的功能实现上存在一些差异。 - **安装配置** 对于 Pinia 来说,其安装过程相对简单直观。仅需通过 npm 或 yarn 安装 `@vue/composition-api` 及 `pinia` 包,并引入相应插件即可完成初始化设置[^2]: ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app') ``` 而 Vuex 则通常作为 Vue 实例的一个选项来集成,虽然也较为简便但相比而言稍显复杂一点。 - **状态定义** 两者都允许开发者定义全局共享的状态 (State),过语法风格有所同。在 Pinia 中可以直接操作 State 而无需额外的方法封装;而在 Vuex 中则需要借助 Mutations 方法来进行状态变更[^5]。 例如,在 Pinia 下可以这样更新 Store: ```typescript // Pinia 方式 store.counter++ ``` 但在 Vuex 中,则要遵循更严格的模式: ```typescript // Vuex 方式 mutations: { increment(state) { state.counter++; } } ``` 这种设计使得 Pinia 更加灵活易用,尤其是在 Composition API 场景下表现尤为突出。 - **获取器(Getters)** 二者均提供了类似的 Getter 接口用来派生新的状态。它们的作用相同,即基于现有的 State 计算得出其他衍生数据[^3]: ```typescript // Pinia Getters 示例 getters: { doubleCount(): number { return this.count * 2; }, } // Vuex Getters 示例 getters: { doubleCount: state => state.count * 2, }, ``` 可以看出两者的写法非常相似,易于迁移学习成本较低。 - **动作(Actions)** 当涉及到异步逻辑处理时,无论是 Pinia 还是 Vuex 都支持 Actions 特性。这有助于分离业务逻辑并保持代码整洁有序[^4]。 ```typescript // Pinia Action 示例 actions: { async fetchItems() { await api.getItems().then((response) => { this.items = response.data; }); }, } // Vuex Action 示例 actions: { async fetchItems({ commit }) { try { let response = await api.getItems(); commit('setItems', response.data); } catch(error){ console.error(error.message); } }, } ``` 尽管如此,由于 Pinia 支持直接修改 State 属性而必经过中间层函数调用,因此编写起来可能更加简洁明了。 #### 社区支持与发展趋势 随着 Vue 3.x 的普及以及官方推荐采用 Composition API 编程范式,Pinia 正逐渐成为新一代首选解决方案之一。它仅继承了原有 Vuex 的核心优势,还进一步简化了API 设计使之更容易理解和掌握。与此同时,社区活跃度也在持续增长中。 综上所述,如果项目正在使用 Vue 3 并且倾向于现代 JavaScript 开发体验的话,那么选择 Pinia 将是一个错的选择。当然,考虑到兼容性和团队熟悉程度等因素,也可以继续沿用成熟的 Vuex 解决方案。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值