چۆنیەتی بەکارهێنانی Pinia بەرێژکاری ستات – Vue JS

Pinia چوویەکە لەنرخی گشتی بۆ Vue.js کە کرایەوە بەرێژکاری ستاتی مانای خۆکار اووبرگریند بکات. بەکارهێنانی Pinia کۆدەکانی خۆکاری Vue.js بزانینی تۆمارکردن و ئەنجامدانی داتای کراوەکانی دەستپێکردنی هەڵبژاردنی جێگایی لەناوخۆیەکانی Vue.js زۆربه‌ی دەکات.

دامەزراندنی Pinia

بۆ دامەزراندنی Pinia، گونجان کتێبخانەی npm بکە و پاکەتەکانی لازمەکان دامەزران بکەوە. بۆ نموونە:

    
      npm install pinia
    
  

بەکارهێنانی Pinia

هەرچی کۆدەکە دەنووسینی Vue.js بەکارەبکە، دەبێت pina بەرێژبکرێت و بەکارهێنەر بێت. بۆ نموونە:

    
      import { createPinia } from 'pinia'

      const pinia = createPinia()
    
  

وەک مەسئەژ، ئێستا دەتوانیت ستاتەکانی خۆکاریت بسریتەوە و بەکارهێنانیان بکەیت. بۆ نموونە:

    
      // Define a store
      pinia.useStore({
        id: 'todos',
        state: () => ({
          todos: []
        })
      })
    
  

کاربەرنامەی نموونە

بڕێک کاربەرنامەی نموونەی Vue.js بۆ بەکارهێنانی Pinia بۆ دیاریکردنی تۆمارکردنی ستاتی مانای خۆکارەکانی خۆکار. بۆ نموونە:

    
      
        

          

            
{{ todo.text }}
          
          
          Add Todo
        
      

      
      import { defineComponent } from 'vue'
      import { useStore } from 'pinia'

      export default defineComponent({
        setup() {
          const store = useStore()

          const todos = store.todos
          const newTodoText = ref('')

          const addTodo = () => {
            store.todos.push({ id: store.todos.length + 1, text: newTodoText.value })
            newTodoText.value = ''
          }

          return {
            todos,
            newTodoText,
            addTodo
          }
        }
      })
      
    
  

بەم شێوەیە، داتای کراوەکانی خۆکارت بەرێژی خۆکار بکەیت و دەتوانیت بەکارهێنانیان بکەیت بەسەر بەکارهێنانی Pinia.