学会pinia+创建vue3项目

创建项目

npm init vue@latest
然后写项目名称
进行插件安装 yes/no
npm i 
然后npm run dev  启动非常快

创建store

项目中store 文件夹下counter.js

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})
//相当于定义了一个模块叫counter
//ref相当于state
//computed相当于getters
//function相当于actions
//不存在mutation  区别是actions支持异步

使用

<template>
<h1>{{countStore.count}}</h1>
<button @click="countStore.increment()">+1</button>
</template>
<script setup>
import { useCounterStore } from '../stores/couter'
const countStore = useCounterStore()
</script>

推荐修改state值用actions,不建议直接state.xx = 数据 也可以使用$patch