创建项目
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