|
1 | | -# Vue Hook for Capacitor Data Storage SQLite |
| 1 | +# Vue Hook for @capacitor-community/sqlite |
2 | 2 |
|
3 | | -A Vue Hook to help Capacitor developpers to use capacitor-data-storage-sqlite plugin in Vue or Ionic/Vue applications |
| 3 | +A Vue Hook to help Capacitor developpers to use `@capacitor-community/sqlite` plugin in Vue or Ionic/Vue applications |
4 | 4 |
|
5 | 5 | ## Getting Started |
6 | 6 |
|
7 | 7 | ```bash |
8 | | -npm install --save capacitor-data-storage-sqlite |
9 | | -npm install --save-dev vue-data-storage-sqlite-hook |
| 8 | +npm install --save @capacitor-community/sqlite |
| 9 | +npm install --save-dev vue-sqlite-hook |
10 | 10 | ``` |
11 | 11 |
|
12 | 12 | ## Applications demonstrating the use of the plugin and the vue hook |
13 | 13 |
|
14 | 14 | ### Vue 3 |
15 | | - - [vue-datastoragesqlite-app] (https://github.com/jepiqueau/vue-datastoragesqlite-app) |
| 15 | + - [vue-sqlite-app] (https://github.com/jepiqueau/vue-sqlite-app) |
16 | 16 |
|
17 | 17 | ### Ionic/Vue (to come) |
18 | | - - [vue-data-storage-sqlite-app-starter] (https://github.com/jepiqueau/vue-data-storage-sqlite-app-starter) |
| 18 | + - [vue-data-storage-sqlite-app-starter] (https://github.com/jepiqueau/vue-sqlite-app-starter) |
19 | 19 |
|
20 | 20 |
|
21 | 21 | ## Usage |
22 | 22 | Import the hook from its own path: |
23 | 23 |
|
24 | 24 | ```js |
25 | | - import { useStorageSQLite } from 'vue-data-storage-sqlite-hook/dist'; |
| 25 | + import { useSQLite } from 'vue-sqlite-hook/dist'; |
26 | 26 | ``` |
27 | 27 |
|
28 | | -Then use the hook inside a component |
| 28 | +Then use the hook inside a component (to come) |
29 | 29 |
|
30 | 30 | ```js |
31 | 31 |
|
32 | | -<template> |
33 | | - <div id="default-container"> |
34 | | - <div id="log"> |
35 | | - <pre> |
36 | | - <p>{{log}}</p> |
37 | | - </pre> |
38 | | - </div> |
39 | | - </div> |
40 | | -</template> |
41 | | - |
42 | | -<script > |
43 | | -import { defineComponent, ref } from 'vue'; |
44 | | -import { useStorageSQLite } from 'vue-data-storage-sqlite-hook/dist'; |
45 | | - |
46 | | -export default defineComponent({ |
47 | | - name: 'DefaultTest', |
48 | | - async setup() { |
49 | | - const log = ref(""); |
50 | | - const { openStore, getItem, setItem, getAllKeys, getAllValues, |
51 | | - getAllKeysValues, isKey, removeItem, |
52 | | - clear} = useStorageSQLite(); |
53 | | - log.value = log.value.concat("**** Starting Test Default Store ****\n"); |
54 | | - // open store |
55 | | - const resOpen = await openStore({}); |
56 | | - if( !resOpen ) { |
57 | | - log.value = log.value.concat("openStore failed \n"); |
58 | | - return { log }; |
59 | | - } else { |
60 | | - log.value = log.value.concat("openStore was successful \n"); |
61 | | - } |
62 | | - // clear the store |
63 | | - const rClear = await clear(); |
64 | | - if( !rClear ) { |
65 | | - log.value = log.value.concat("clear failed \n"); |
66 | | - return { log }; |
67 | | - } else { |
68 | | - log.value = log.value.concat("clear was successful \n"); |
69 | | - } |
70 | | - // store a string |
71 | | - await setItem("session","Session Opened"); |
72 | | - const session = await getItem('session'); |
73 | | - if(session != "Session Opened") { |
74 | | - log.value = log.value.concat("setItem/getItem session failed \n"); |
75 | | - return { log }; |
76 | | - } else { |
77 | | - log.value = log.value.concat("setItem/getItem session was successful \n"); |
78 | | - } |
79 | | - // store a JSON Object in the default store |
80 | | - const data = {'a':20,'b':'Hello World','c':{'c1':40,'c2':'cool'}}; |
81 | | - await setItem("testJson",JSON.stringify(data)); |
82 | | - const testJson = await getItem("testJson"); |
83 | | - if( testJson != JSON.stringify(data) ) { |
84 | | - log.value = log.value.concat("setItem/getItem testJson failed \n"); |
85 | | - return { log }; |
86 | | - } else { |
87 | | - log.value = log.value.concat("setItem/getItem testJson was successful \n"); |
88 | | - } |
89 | | - // store a number in the default store |
90 | | - const data1 = 243.567; |
91 | | - await setItem("testNumber",data1.toString()); |
92 | | - // read number from the store |
93 | | - const testNumber = await getItem("testNumber"); |
94 | | - if( testNumber != data1 ) { |
95 | | - log.value = log.value.concat("setItem/getItem testNumber failed \n"); |
96 | | - return { log }; |
97 | | - } else { |
98 | | - log.value = log.value.concat("setItem/getItem testNumber was successful \n"); |
99 | | - } |
100 | | - // isKey tests |
101 | | - const iskey = await isKey('testNumber'); |
102 | | - if( !iskey ) { |
103 | | - log.value = log.value.concat("isKey testNumber failed \n"); |
104 | | - return { log }; |
105 | | - } else { |
106 | | - log.value = log.value.concat("isKey testNumber was successful \n"); |
107 | | - } |
108 | | - const iskey1 = await isKey('foo'); |
109 | | - if( iskey1 ) { |
110 | | - log.value = log.value.concat("isKey foo failed \n"); |
111 | | - return { log }; |
112 | | - } else { |
113 | | - log.value = log.value.concat("isKey foo was successful \n"); |
114 | | - } |
115 | | - // Get All Keys |
116 | | - const keys = await getAllKeys(); |
117 | | - if(keys.length != 3) { |
118 | | - log.value = log.value.concat("getAllKeys failed \n"); |
119 | | - return { log }; |
120 | | - } else { |
121 | | - for(let i = 0; i< keys.length;i++) { |
122 | | - log.value = log.value.concat(' key[' + i + "] = " + keys[i] + "\n"); |
123 | | - } |
124 | | - log.value = log.value.concat("getAllKeys was successful \n"); |
125 | | - } |
126 | | - // Get All Values |
127 | | - const values = await getAllValues(); |
128 | | - if(values.length != 3) { |
129 | | - log.value = log.value.concat("getAllValues failed \n"); |
130 | | - return { log }; |
131 | | - } else { |
132 | | - for(let i = 0; i< values.length;i++) { |
133 | | - log.value = log.value.concat(' key[' + i + "] = " + values[i] + "\n"); |
134 | | - } |
135 | | - log.value = log.value.concat("getAllValues was successful \n"); |
136 | | - } |
137 | | - // Get All KeysValues |
138 | | - const keysvalues = await getAllKeysValues(); |
139 | | - if(keysvalues.length != 3) { |
140 | | - log.value = log.value.concat("getAllKeysValues failed \n"); |
141 | | - return { log }; |
142 | | - } else { |
143 | | - log.value = log.value.concat("getAllKeysValues was successful \n"); |
144 | | - } |
145 | | - // Remove a key |
146 | | - const res = await removeItem('testJson') |
147 | | - if( !res ) { |
148 | | - log.value = log.value.concat("removeItem failed \n"); |
149 | | - return { log }; |
150 | | - } else { |
151 | | - log.value = log.value.concat("removeItem was successful \n"); |
152 | | - } |
153 | | - // Get All Keys |
154 | | - const keys1 = await getAllKeys(); |
155 | | - if(keys1.length != 2) { |
156 | | - log.value = log.value.concat("getAllKeys after removeItem failed \n"); |
157 | | - return { log }; |
158 | | - } else { |
159 | | - for(let i = 0; i< keys1.length;i++) { |
160 | | - log.value = log.value.concat(' key[' + i + "] = " + keys1[i] + "\n"); |
161 | | - } |
162 | | - log.value = log.value.concat("getAllKeys after removeItem was successful \n"); |
163 | | - } |
164 | | - log.value = log.value.concat("\n**** Test Default Store was successful ****\n"); |
165 | | - return { log }; |
166 | | - } |
167 | | - |
168 | | -}); |
169 | | -</script> |
| 32 | + |
170 | 33 | ``` |
171 | 34 |
|
172 | 35 | and then call the component from a view |
173 | 36 |
|
174 | 37 | ```js |
175 | | -<template> |
176 | | - <h1>StoreDefault</h1> |
177 | | - <Suspense> |
178 | | - <template #default> |
179 | | - <DefaultTest /> |
180 | | - </template> |
181 | | - <template #feedback> |
182 | | - <div> Loading ... </div> |
183 | | - </template> |
184 | | - </Suspense> |
185 | | -</template> |
186 | | -<script> |
187 | | -import DefaultTest from '@/components/DefaultTest.vue'; |
188 | | -export default { |
189 | | - name: 'StoreDefault', |
190 | | - components: { DefaultTest } |
191 | | -}; |
192 | | -</script> |
193 | | -<style> |
194 | | -h1 { |
195 | | - text-align: center; |
196 | | -} |
197 | | -</style> |
| 38 | + |
198 | 39 | ``` |
0 commit comments