Pinia学习笔记之1--概览

Why Pinia

Pinia (pronounced /piːnjʌ/, like “peenya” in English) is the closest word to piña (pineapple in Spanish) that is a valid package name. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It’s also a delicious tropical fruit indigenous to South America.

Why should I use Pinia?

Pinia t同时支持vue2.0与vue3.0

特性

  • Devtools的支持
  • 模块热更新
  • 自定义拓展插件
  • 对TypeScript的友好支持
  • 对服务端渲染的支持

基础用法

开始创建一个store

// stores/counter.js
import { defineStore } from 'pinia'

export const useCountStore = defineStore('counter', {
    state: () => {
        return {
            count: 0
        }
    },
    actions: {
        increment() {
            this.count++
        }
    }
})

你可以在组件中这样使用

import { useCounterStore } from '@/stores/counter'

export default {
    setup() {
        const counter = useCounterStore()
        counter++
        // 或者使用字段添加
        counter.$patch({
            count: counter + 1
        })
        // 或者使用方法触发
        counter.increment()
    }
}

你甚至可以使用一个函数(类似于组件的setup())去为一个更高级的用法定义Store

export const useCounterStore = defineStore('counter' () => {
    const count = ref(0)
    function increment () {
        count.vaule++
    }

    return { count, increment }
})

如果你现在仍未使用setup()和组件式API,不用担心,Pinia提供了类似于Vuex的设置,你可以以同样的方式定义存储,但随后使用mapStores()、mapState()或mapActions()

const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0}),
    getters: {
        double: (state) => state.count * 2
    },
    actions: {
        increment () {
            this.count++
        }
    }
})

const useUserStore = defineStore('user', {
    // 业务代码
})


// 使用方式

export default {
    computed: {
        // 提供访问this.useCounterStore和this.useUserStore的权限
        ...mapStores(useCounterStore, useUserStore)
        // 可以通过计算属性访问this.count和this.double
        ...mapState(useCounterStore, ['count', 'double'])
    },
    methods: {
        // 提供访问this.increment的方法
        ...mapActions(useCounterStore, ['increment'])
    }
}

实现一个更加完善的案例

下面是一个更完整的API示例,您将在Pinia中使用它,甚至在JavaScript中使用它的类型。对于一些人来说,这可能已经足够了,不需要进一步阅读就可以开始了,但我们仍然建议检查文档的其余部分,甚至跳过这个例子,当你阅读了所有的Core Concepts后再回来

老生常谈的todos

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
    state: () => ({
        /** @type {{ text: string, id: number, isFinished: boolean }[]} */
        todos: [],
        /** @type {'all' | 'finished' | 'unfinished'} */
        filter: 'all',
        nextId: 0
    }),
    getters: {
        finishedTodos(state) {
            return state.todos.filter((todo) => todo.isFinished)
        },
        unfinishedTodos(state) {
            return state.todos.filter((todo) => !todo.isFinished)
        },
        filteredTodos(state) {
            if (this.filter === 'finished') {
                // 调用其它的getter方法
                return this.finishedTodos
            } else if (this.filter === 'unfinished') {
                return this.unfinishedTodos
            }
            return this.todos
        },
    },
    actions: {
        addTodo(text) {
            this.todos.push({
                text,
                id:this.nextId++,
                isFinished: false
            })
        }
    }
})

与Vuex相对比

Pinia最初是最为Vuex的下一个版本使用的,现在发现Pinia已经实现了在Vuex5大多数想要的功能,并决定将其改为最新的建议。

与Vuex相比,Pinia提供了更简单的API而不需要更多的条框,提供了组合API风格的API,最重要的是,当与TypeScript一起使用时,它提供了可靠的类型推断支持。

与Vuex3.X/Vuex4.X相对比

  • mutations Api不在使用,因为这个Api经常被认为是冗余的;
  • 不需要去编写复杂的包装器去支持TypeScript,因为可以很好的支持Ts的类型推导;
  • 不需要魔法般的字符串注入、函数导入,现在可以直接使用他们,并且自动完成调用;
  • 不需要动态添加stores, 因为他们默认是动态的
  • 不再有嵌套的模块结构。您仍然可以通过在另一个stores中隐式导入和使用stores,但是Pinia在设计上提供了一个扁平的结构,同时仍然支持商stores之间的交叉组合。你甚至可以拥有stores的循环依赖关系;
  • 不需要命名空间。考虑到stores的扁平化结构,namespacing是在stores被定义的时候与生具有的,所以可以视为所有的stores都具有命名空间;

安装使用

install

使用本地的命令行工具安装Pinia包:

yarn add pinia
# 或者使用npm
npm install pinia

Tip

如果使用的是Vue2版本, 您需要另外安装composition api@vue/composition-api。如果您使用的是Nuxt,则需要另外参考这些信息

创建Pinia根store然后导入应用程序中:

import { createPinia } from 'pinia'

app.use(createPinia())

但是,如果使用的是Vue2.则需要安装额外的插件然后注入创建好的Pinia到应用程序中:

import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
    el: '#app',
    // 其它的Vue配置项
    pinia
})

Pinia也将添加devtools支持。在Vue 3中,像时间旅行和编辑这样的功能仍然不被支持,因为Vue-devtools还没有公开必要的api,但devtools有更多的功能,总体上来说,开发人员的体验要优越得多。在Vue 2中,Pinia使用了Vuex的现有接口(因此两者不能一起使用)。

你可能感兴趣的:(vue3.0,vue,javascript,vue,Pinia)