修改store

简介: 修改store

直接修改

<template>
  <div>{{ store.count }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
import { useStore } from '@/store/index';
let store = useStore()
const add = () => {
  store.count++
}
</script>

调用$patch

<template>
  <div>{{ store.count }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
import { useStore } from '@/store/index';
let store = useStore()
const add = () => {
  store.$patch({
    count: store.count + 1,  
    msg: 'hello pinia!'
  })
}
</script>


$patch加函数的形式修改状态数据

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      msg: 'hello world!',
      count: 0,
      userInfo: {
        name:'张三'
      },
      userItems: []
    }
  },
  getters: {},
  actions: {}
}) 



相关文章
|
JavaScript 前端开发
为什么import store from ‘./store‘和 ‘./store/index‘一样
为什么import store from ‘./store‘和 ‘./store/index‘一样
166 0
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
278 0
|
4月前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
105 1
|
7月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
2365 1
|
Java 数据库 OceanBase
,Store组件的JVM参数
,Store组件的JVM参数
182 1
MacBook中如何删除.DS_Store文件?
MacBook中如何删除.DS_Store文件?
|
JavaScript
vue再读8-实例选项data
vue再读8-实例选项data
113 0
vue再读8-实例选项data
|
前端开发
React里修改state的两种方式
React里修改state的两种方式

热门文章

最新文章