pinia的使用

vue官方状态管理组件，被视为下一代的vuex，为了致敬作者所以起名pinia，而没有继续使用vuex

• Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。
• pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。
• pinia中action支持同步和异步，Vuex不支持
• 良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了
• 无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。
• 体积非常小，只有1KB左右。
• pinia支持插件来扩展自身功能。

安装

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

创建一个 pinia 实例(根 store)并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

store配置

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。

我们需要使用pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。

首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。

与 Vue 的选项式 API（类写法） 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象

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

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

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

  return { count, increment }
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

使用 Store

虽然我们前面定义了一个 store，但在我们使用 <script setup> 调用 useStore()(或者使用 setup() 函数，像所有的组件那样) 之前，store 实例是不会被创建的：

<script setup>
  import { useCounterStore } from '@/stores/counter'
  
  const store = useCounterStore()
</script>

你可以定义任意多的 store，实现业务的独立化。

状态的修改

• 直接修改
• action修改
• 批量修改

<template>
  <div>
    aaaaa
    <div>{{ conter.count }}</div>
    <button @click="change">點擊</button>
  </div>
</template>
<script setup>
  import { useCounterStore } from '@/store/pinia'
  var conter = useCounterStore();
  var change = () => {
    // 直接修改
    conter.count++

    // 调用actions修改
    // conter.increment();

    // 批量修改
    // conter.$patch({
    //     count: 100
    // })

    // 局部修改
    // conter.$patch((state) => {
    //     state.count = 123
    // })
  }

</script>

pinia持久化

依赖第三方插件 pinia-plugin-persistedstate

安装

npm i  pinia-plugin-persistedstate

在入口文件内，注册插件

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模块独立开启持久化

const useCounterStore = defineStore("counter",{
  // 开启数据持久化
  persist: true
  // ...省略
});

常用到的一些组件库 

1. element Plus
2. 数据可视化 echarts npm install echarts vue-echarts
3. 编辑器组件 ueditor Quill 富文本编辑器
4. 地图 qq腾讯lbs开放平台