vue2 pinia 安装与入门

安装

本体

npm install pinia 

vue2特定

npm install @vue/composition-api 

持久化存本地

npm install pinia-plugin-persist

vue.config.js

不加的话会报错

configureWebpack: {
// 在configureWebpack里加上以下module
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    },
}

main.js

import { createPinia, PiniaVuePlugin } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

Vue.use(PiniaVuePlugin)
const pinia = createPinia() //需要挂载在实例上
pinia.use(piniaPluginPersist) // 持久化本地存储

new Vue({
  el: '#app',
  router,
  store,
  pinia, // 这里
  created: bootstrap,
  render: h => h(App)
})

store文件夹下新建news.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  persist: {
    enabled: true, // 开启本地存储
    strategies: [
      {
        key: 'count',
        storage: localStorage
      }
    ]
  },
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

在vue文件中使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>

</template>

<script>
import { useCounterStore } from '@/store/news.js'
export default {
  computed: {
    count() {
      return useCounterStore().count;
    },
  },
  methods: {
    increment() {
      useCounterStore().increment();
    },
    decrement() {
      useCounterStore().decrement();
    },
  },

}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值