pinia

// 1.定义并导出容器
// 参数1：容器的 ID,必须唯一，将来 Pinia 会把所有的容器挂载到跟容器
export const useMainStore = defineStore('main', {
  state: () => {
    return {
      count:100,
      name:'张三',
      age:12,
    }
  },
  /**
   * 类似组件的  computed,用来封装计算属性，有缓存功能
   */
  getters: {
    count20(state) {
      console.log("调用了count20")
      return state.count + 20
    },
  },
  /**
   * 类似组件的 methods,封装业务逻辑，修改 state
   */
  actions: {
    changeState(){
      this.count += 10
      console.log("count增加了");
    }
  },
})

在组件中使用store变量：

先导入钩子函数
import { useMainStore } from '../store/index'
const mainStore = useMainStore()
//方法一
   <h1>pinia里的count:{{ mainStore.count }}</h1>
//方法二
在上面的基础上再导入storeToRefs
import { storeToRefs } from 'pinia'
const { count } = storeToRefs(mainStore)
    <h1>pinia里的count:{{ count }}</h1>
以上就是变量的渲染

修改store里的变量：

<button @click="add">增加</button>
//另一种官方不推荐的就不介绍了，有兴趣自己可以去看看
const add = ()=>{
  mainStore.$patch(state=>{
      //这里可以批量修改
     state.age++
     state.name = "李四"
     state.count += 10
  })
}

使用actions里的方法：

const add = ()=>{
    //直接调用就行
     mainStore.changeState();
}

使用getters里的方法：

//直接已使用就行
//情景一：
<h1>{{ mainStore.count20 }}</h1>
//情景二：
<h1>{{ mainStore.count20 }}</h1>
<h1>{{ mainStore.count20 }}</h1>
<h1>{{ mainStore.count20 }}</h1>
//一和二的结果是120