Jelajahi Sumber

Add instructions to use $persist with Alpine.data (#1973)

Simone Todaro 3 tahun lalu
induk
melakukan
fa892436e9
1 mengubah file dengan 13 tambahan dan 0 penghapusan
  1. 13 0
      packages/docs/src/en/plugins/persist.md

+ 13 - 0
packages/docs/src/en/plugins/persist.md

@@ -136,3 +136,16 @@ Now Alpine will store and retrieve the above "count" value using the key "other-
 Here's a view of Chrome Devtools to see for yourself:
 
 <img src="/img/persist_custom_key_devtools.png" alt="Chrome devtools showing the localStorage view with count set to 0">
+
+<a name="using-persist-with-alpine-data"></a>
+## Using $persist with Alpine.data
+
+If you want to use `$persist` with `Alpine.data`, you need to use a standard function instead of an arrow function so Alpine can bind a custom `this` context when it initially evaluates the component scope.
+
+```js
+Alpine.data('dropdown', function () {
+    return {
+        open: this.$persist(false)
+    }
+})
+```