Pinia 是什么？

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的export const state = reactive({})来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

• Devtools 支持
  • 追踪 actions、mutations 的时间线
  • 在组件中展示它们所用到的 Store
  • 让调试更容易的 Time travel
• 热更新
  • 不必重载页面即可修改 Store
  • 开发时可保持当前的 State
• 插件：可通过插件扩展 Pinia 功能
• 为 JS 开发者提供适当的 TypeScript 支持以及 自动补全 功能。
• 支持服务端渲染

快速入门

在使用vue-cil构建vue项目的时候就可以选择vuex进行安装

安装结束后会创建如下目录

然后store文件中我们在state中加上

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

创建一个实例

生命周期

1. create阶段,初始化
2. mount 挂载阶段
3. update 更新阶段，当data里面的数据发生改变的时候再刷新视图
4. destory 销毁阶段

    Document

        {{a}}

    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!'

        },
         beforeUpdate(){

          console.log('有数据更新')},
          updated(){
            console.log('更新完毕')},

        beforeMount(){
            console.log('挂载前')
        },
        mounted(){
            setTimeout(()=>{
                this.a='change!';
            },2000)

        }

    })