什么是网站的主页,网站开发费走什么科目,androidstudio使用教程,西安的网页设计公司排名大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。Vue3 发布已经有一段时间… 大家好我是若川。最近组织了源码共读活动感兴趣的可以点此加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。Vue3 发布已经有一段时间了它采用了新的响应式系统而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统官方的状态管理库 Vuex 也在适配中为此官方提出了一个 Vuex 5 的全新提案。支持两种语法创建 StoreOptions Api 和 Composition Api删除 mutations只支持 state、getters、actions模块化的设计能很好支持代码分割没有嵌套的模块只有 Store 的概念完整的 TypeScript 支持在这个提案下方有个评论很有意思。简单翻译一下好巧不巧Vuex5 的提案与 Pinia 实现的功能不能说毫无关系只能说一模一样今天的文章就来给大家介绍一下这个菠萝。 安装 在现有项目中用过如下命令进行 Pinia 模块的安装。# yarn
yarn add pinianext
# npm
npm i pinianext安装完成后需要在 Vue3 项目的入口文件中进行导入安装。// main.js
import { createApp } from vue
import { createPinia } from pinia
import App from ./App.vue// 实例化 Vue
const app createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount(#app) 上手 要使用 Pinia 的话只需要定义一个 store然后在用到该数据的地方进行导入。定义 Storeimport { defineStore } from pinia// 对外部暴露一个 use 方法该方法会导出我们定义的 state
const useCounterStore defineStore({// 每个 store 的 id 必须唯一id: counter,// state 表示数据源state: () ({count: 0}),// getters 类似于 computed可对 state 的值进行二次计算getters: {double () {// getter 中的 this 指向 statereturn this.count * 2},// 如果使用箭头函数会导致 this 指向有问题// 可以在函数的第一个参数中拿到 statedouble: (state) {return state.count * 2}},// actions 用来修改 stateactions: {increment() {// action 中的 this 指向 statethis.count},}
})export default useCounterStore除了使用上述类似 vuex 的方式来构建 state还可以使用 function 的形式来创建 store有点类似于 Vue3 中的 setup()。import { ref, computed } from vue
import { defineStore } from pinia// 对外部暴露一个 use 方法该方法会导出我们定义的 state
const useCounterStore defineStore(counter, function () {const count ref(0)const double computed(() count.value * 2)function increment() {count.value}return {count, double, increment}
})export default useCounterStore使用 Store前面也介绍过Pinia 提供了两种方式来使用 storeOptions Api 和 Composition Api 中都完美支持。Options Api在 Options Api 中可直接使用官方提供的 mapActions 和 mapState 方法导出 store 中的 state、getter、action其用法与 Vuex 基本一致很容易上手。import { mapActions, mapState } from pinia
import { useCounterStore } from ../model/counterexport default {name: HelloWorld,computed: {...mapState(useCounterStore, [count, double])},methods: {...mapActions(useCounterStore, [increment])}
}Composition ApiComposition Api 中不管是 state 还是 getter 都需要通过 computed 方法来监听变化这和 Options Api 中需要放到 computed 对象中的道理一样。另外 Options Api 中拿到的 state 值是可以直接进行修改操作的当然还是建议写一个 action 来操作 state 值方便后期维护。// Composition Api
import { computed } from vue
import { useCounterStore } from ../stores/counter
export default {name: HelloWorld,setup() {const counter useCounterStore()return {// state 和 getter 都需要在使用 computed这和 Options Api 一样count: computed(() counter.count),double: computed(() counter.double),increment: () { counter.count }, // 可以直接修改 state 的值increment: counter.increment, // 可以引用 store 中定义的 action}}
}类型提示在 Vuex 中TypeScript 的类型提示做得不是很好在进行类型推导时只能找到它的 state。特别是写代码的过程中代码提示就很不智能。而 pinia就能推导出定义的所有 state、getter、action这样在写代码的时候就会方便很多。主要是 pinia 通过 TypeScript 进行了十分友好的类型定义感兴趣的可以看看 pinia 的类型定义文件pinia.d.ts代码分割由于使用了模块化设计所有的 store 都能够单独引入而不是像 vuex 一样通过 modules 的方式将所有的 module 挂载到一个 store 上。假设我们当前通过 Vuex 创建了一个 Store这个 Store 下有两个 module分别是用户模块User和商品模块Goods。即使当前首页只使用到了用户信息但是整个 Store 都会被打包到首页的 js chunk 中。如果我们使用 pinia我们会使用 defineStore 定义两个 完全是分离状态的 store两个页面在引入时也互不影响。最后打包的时候首页的 js chunk 和商品页的 js chunk 会分别打包对应的 store。Pinia 的介绍到这里就告一段落了如果现在有新项目要使用 Vue3 进行开发推荐无脑使用 Pinia更加简洁而且大小仅 1KB。- END -················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
