文档 https://pinia.vuejs.org/
安装
cnpm i pinia --save
Vue2 需要额外安装 cnpm i pinia @vue/composition-api --save

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

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

如果报这种错误 记得在 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"
            }
          ] 
        }
      }
}

状态管理

新建一个js文件 （这里用store.js）


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

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  // 相当于 vue 中的 computed 计算属性
  getters: {
	
	},
   // 相当于 vue 中的 methods 方法
  actions:{
    increment(){
        this.counter++
    }
  }
})
export default useStore //导出

页面使用
<template>
  <div>
    <fieldset>
      <legend>
        <button @click="increment">{{ counter }}</button>
      </legend>
    </fieldset>
  </div>
</template>
<script>
 import {mapState,mapActions} from 'pinia'
 import storeId from '../store'  //storeId就是导出的那个值
export default {
  methods: {
     ...mapActions(storeId,['increment'])//不把函数补充完整的时候页面会报错
  },
  computed:{
    ...mapState(storeId,['counter','name','isAdmin'])
  }
};
</script>

另一种取值方式
<script>
 import {mapState,mapActions, } from 'pinia'
 import storeId from '../storeioen'  //storeId就是导出的那个值
 const ustoreId = storeId() //实例化容器
 console.log(ustoreId)
 const { counter } = ustoreId //解构出来的值是不能动态绑定的 可以通过下面的方法
export default {
  data(){
    return{
      id:''
    }
  },
  methods: {
  },
  computed:{
  },
  mounted(){
     this.id = counter 
  }
};
</script>

storeToRefs 

<script>
 import {mapState,mapActions,storeToRefs } from 'pinia'
 import storeId from '../storeioen'  //storeId就是导出的那个值
 const ustoreId = storeId() //实例化容器
 console.log(ustoreId)
 const { counter } = storeToRefs(ustoreId) //这样使用

export default {
  data(){
    return{
      id:''
    }
  },
  methods: {
  },
  computed:{
  },
  mounted(){
     this.id = counter   但是这样出来的值会变成一个对象 值的key 为value 使用的时候需要注意
  }
};
</script>

template中直接使用 《网上看到的是直接可以使用 不知道为什么我的不行用了一种方法代替》

<template>
  <div>
    <fieldset>
      <legend>
        {{this.obj.comp}}
        <button @click="this.obj.increment">{{this.obj.counter}}</button>
      </legend>
    </fieldset>
  </div>
</template>
<script>
// 导入 pinia 实例
import  useMainStore  from '../storeioen'

// 实例化容器
const mainStore = useMainStore()

export default {
  data(){
    return{
      id:''
    }
  },
  mounted(){
    this.obj = mainStore
    console.log(this.obj)
   
  }
};
</script>