this.lastName = payload.lastName
this.userId = payload.userId
},
- // easily reset state using `$reset`
+ // 使用 `$reset` 可以轻松重置 state
clearUser () {
this.$reset()
}
```vue
<script setup>
const store = useCounterStore()
-// call the action as a method of the store
+// 将 action 作为 store 的方法进行调用
store.randomizeCounter()
</script>
<template>
- <!-- Even on the template -->
+ <!-- 即使在模板中也可以 -->
<button @click="store.randomizeCounter()">Randomize</button>
</template>
```
```vue
<script setup>
const someStore = useSomeStore()
-// this subscription will be kept even after the component is unmounted
+// 该订阅器将被保留，即使组件被卸载
someStore.$onAction(callback, true)
</script>
```
import { useUserListStore } from './store'
const userList = useUserListStore()
const { getUserById } = storeToRefs(userList)
-// note you will have to use `getUserById.value` to access
-// the function within the <script setup>
+// 请注意，你需要使用 `getUserById.value` 来访问
+// <script setup> 中的函数
</script>
<template>
```vue
<script setup>
import { useCounterStore } from '@/stores/counter'
-// access the `store` variable anywhere in the component ✨
+// 在组件的任何地方访问 `store` 变量 ✨
const store = useCounterStore()
</script>
```
```vue
<script setup>
const store = useCounterStore()
-// ❌ This won't work because it breaks reactivity
-// it's the same as destructuring from `props`
+// ❌ 这样是不可行的，因为它会破坏响应性
+// 就与直接解构 `props` 一样
const { name, doubleCount } = store // [!code warning]
-name // will always be "Eduardo" // [!code warning]
-doubleCount // will always be 0 // [!code warning]
+name // 将始终是 "Eduardo" // [!code warning]
+doubleCount // 将始终是 0 // [!code warning]
setTimeout(() => {
store.increment()
}, 1000)
-// ✅ this one will be reactive
-// 💡 but you could also just use `store.doubleCount` directly
+// ✅ 这样写是响应式的
+// 💡 当然你也可以直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)
</script>
```
<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
-// `name` and `doubleCount` are reactive refs
-// This will also extract refs for properties added by plugins
-// but skip any action or non reactive (non ref/reactive) property
+// `name` 和 `doubleCount` 都是响应式的 ref
+// 这也会提取插件添加的 ref 属性
+// 但会跳过任何 action 或非响应式（非 ref/reactive）属性
const { name, doubleCount } = storeToRefs(store)
-// the increment action can just be destructured
+// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>
```
// 你也可以定义更简单的值
simpleNumber: number
- // type the router added by the plugin above (#adding-new-external-properties)
+ // 添加路由(#adding-new-external-properties)
router: Router
}
}
```vue
<script setup>
const someStore = useSomeStore()
-// this subscription will be kept even after the component is unmounted
+// 该订阅器将被保留，即使组件被卸载
someStore.$subscribe(callback, { detached: true })
</script>
```
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
-// with autocompletion ✨
+// 自动补全！ ✨
counter.$patch({ count: counter.count + 1 })
-// or using an action instead
+// 或使用 action 代替
counter.increment()
</script>
<template>
- <!-- Access the state directly from the store -->
+ <!-- 直接从 store 中访问 state -->
<div>Current Count: {{ counter.count }}</div>
</template>
```
```vue
<script setup>
-// this works because pinia knows what application is running inside of
-// `setup`
+// 这是可行的，
+// 因为 pinia 知道在 `setup` 中运行的是什么程序。
const main = useMainStore()
</script>
```
projects / thirdparty / vuejs / pinia.git / commitdiff
