vuepinia配置

安装

npm i pinia --save
Vue2 需要额外安装 npm i pinia @vue/composition-api --save

main.js引入

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

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



module.exports = {
      configureWebpack: { //这个是配置
        module: {
          rules: [
            {
              test: /\.mjs$/,
              include: /node_modules/,
              type: "javascript/auto"
            }
          ] 
        }
      }
}

新建一个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 //导出

页面使用
<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>