vue2脚手架使用pinia状态管理器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3
符合直觉，易于学习
极轻， 仅有 1 KB
模块化设计，便于拆分状态
本文简述vue2使用pinia的简单示例

一、pandas是什么？

• Pinia 是 Vue
  的存储库，它允许您跨组件/页面共享状态，使用Pinia主要是它保留了Vuex的核心功能并且使用起来简单。目前Pinia是在Vue2和Vue3上

都可以使用的，在2上使用要额外进行简单的配置

二、使用步骤

1.安装

文档 https://pinia.web3doc.top/
安装
npm i pinia --save
Vue2 需要额外安装 npm i pinia @vue/composition-api --save

2.引入库

在main.js中配置的代码如下：

main.js引入
// 引入pinia
import {createPinia,PiniaVuePlugin} from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()//需要挂载在实例上

new Vue({
  pinia,
  render: h => h(App)
  
}).$mount('#app')

3.配置

在 vue.config.js 中进行配置（不配置的话会报错）

module.exports = {
    css: {
        loaderOptions: {
          sass: {
            data: `@import "~@/assets/scss/variables.scss";`,
          },
        }
      },
      configureWebpack: { //这个是配置
        module: {
          rules: [
            {
              test: /\.mjs$/,
              include: /node_modules/,
              type: "javascript/auto"
            }
          ] 
        }
      }
}

新建一个store文件夹，新建index.js文件

新建一个js文件


import { defineStore } from 'pinia' //引入

const useStore = defineStore('storeId', {
  // 状态管理器 核心部分 return要存储的数据
  state: () => {
    return {
      counter: 0,
    }
  },
  // 相当于 vue 中的 computed 计算属性 返回一个数值
  getters: {
	getcounter(){
      return this.counter+1;
    }
	},
   // 相当于 vue 中的 methods 方法
  actions:{
    increment(){
        this.counter++
    }
  }
})
export default useStore //导出

4.页面引入

页面使用
<template>
  <div>
      <button @click="increment">{{ counter }}</button>
      <span>{{ getcounter }}</span>
  </div>
</template>
<script>
 import {mapState,mapActions} from 'pinia'
 import storeId from '../store'  //storeId就是导出的那个值

export default {
  methods: {
     ...mapActions(storeId,['increment'])//不把函数补充完整的时候页面会报错
  },
  computed:{
    ...mapState(storeId,['counter','getcounter'])
  }
};
</script>

总结

Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展 官方文档 Plugins
Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见