Pinia使用预览

pinia使用预览

---

前言：Pinia 是 Vue.js 的轻量级状态管理库，也被称为下一代Vuex，上手pinia给我的第一感觉就是使用起来很方便，它不再需要写Mutations这个直观感觉上“多此一举”的方法了，分模块也不用那么麻烦，下面带大家看一下他的使用方法，我自认为没有为大家传授经验的能力，所以只是带大家看一下它的使用方法不涉及原理。

安装

命令行下载Pinia：npm install pinia，因为只是做使用预览，我就不介绍其他环境了，安装好后来到src/main.js，写好的代码如下：

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

createApp(App).use(createPinia()).use(router).mount('#app')

使用

在src文件夹下新建store文件夹并新建main.store.js文件：

// src/store/main.store.js

import { defineStore } from 'pinia'

const useMainStore = defineStore('main', {  // main是它的模块id
  state: () => ({
    name: '张三',
    count: 1,
    friends: [{ name: '李四', age: 17 }]
  }),
  actions: { // 这里的方法可以是同步的也可以是异步的
    increment(num) {
      this.count += num // 直接修改state的数据
    }
  },
   getters: {
    userInfo: (state): string => {
      return `${state.name}，有${state.friends.length}个朋友`
    }
  }
})

export default useMainStore

来到app.vue分别测试：使用数据、直接修改数据、同时直接修改多个数据、重置数据、使用cation *** 作属性、使用getter属性、订阅以及取消订阅。

// app.vue
import useMainStore from './store/main.store.js'

const mainStore = useMainStore()
// 使用数据
console.log(mainStore.name) // 张三

// 直接改变数据
mainStore.name = '李四' 

// 一次修改多个值1
mainStore.$patch({
    name: '王五',
    friends: [{ name: '赵六', age: 15 }]
})

// 一次修改多个值2
mainStore.$patch((state) => {
    state.name = '田七'
    state.friends[0].age = 16
})

// 重置数据
mainStore.$reset() // store里的数据变回初始值

// 使用action
mainStore.increment(100) // count = 101

// getter属性
console.log(mainStore.userInfo) // 张三有1个朋友

// 订阅store
const subscribe = mainStore.$subscribe((mutation, store) => {
  console.log(mutation) // 触发状态改变的信息
  console.log(store) // 当前store
})

// 取消订阅
subscribe() // 调用监听的返回值

// 订阅action
const actionSubscribe = mainStore.$onAction((actionInfo) => {
  console.log(actionInfo) // 被触发action的一些信息
})

// 取消cation订阅
actionSubscribe()

结语

看完了这些 *** 作有没有觉得Pinia很简单很便捷呢，不用犹豫直接在下个项目中用起来吧。以上代码有不对的地方请指出。