vuex的替代插件pinia

samscat

已于 2022-02-10 10:48:54 修改

阅读量852

点赞数

分类专栏： vue 文章标签： vue.js 前端

于 2022-02-09 18:31:49 首次发布

本文链接：https://blog.csdn.net/samscat/article/details/122847602

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客介绍了Pinia，它是Vuex的一个简化版，同时支持Vue2和Vue3。通过示例展示了如何创建和使用Pinia store，包括定义state、getters和actions，以及在组件中如何通过mapState和mapActions来映射和调用这些状态和方法。此外，还提供了官方文档链接供读者深入学习。

摘要由CSDN通过智能技术生成

pinia 是vuex的简化版，兼容vue2和vue3

基本使用如下：

下载：yarn add pinia@next 或者 npm install pinia@next
创建store仓库：

//  store/index.ts
import { defineStore } from 'pinia';
type stateType = {
    name: String,
    type: String,
    dataList: String[]
}
export const piniaStore = defineStore('main', {
    state: ():stateType => ({
        name: '玛丽',
        type: 'admin',
        userList: []
    }),
    getters: {
        getName: state => state.name
    },
    actions: {
        async addNameDelay(data:String) {
            console.log('stoewadd--',data)
            await new Promise((reslove,reject) => {
                setTimeout(() => {
                    console.log('延迟一秒')
                    this.userList.push(data)
                    reslove('ok'); 
                }, 1000)
            })
        }
    }

})

在main.ts文件使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

在组件中使用

// 引入store和映射方法
import {piniaStore} from '@/store/pinia'
import {mapActions, mapState} from 'pinia'
export default defineComponent({
  name: 'uList',
  data () {
    return {
      dataList: [],
      store: '',
      searchKey: '',
      add: {}
    }
  },
  computed: {
    ...mapState(piniaStore, ['name', 'getName']), // state 和getters都使用mapState映射获取
  },
  methods: {
  	...mapActions(piniaStore, ['addNameDelay'])  // 使用mapActions获取actions方法
  },
  mounted() {
     /**state, getters,actions 都可以通过store直接点出来 **/
    // const store = piniaStore();
    // console.log('获取state里面的name ===', store.name)
    // console.log('获取getters里面的getName===', store.getName)
    // console.log('调用actions里面的方法 ===', store.addNameDelay('ssf'))
    
  },
  
  ...