trying setup store

src/stores/employees.ts

@@ -1,17 +1,104 @@
 import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
-import { settingsEmployeesIndex } from './settings/employees-index'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
+import _assign from 'lodash/assign'
+import { reactive, watch, ref, onMounted } from 'vue'
 
-const user = useUser()
+export default defineStore('employees', () => {
+    const user = useUser()
 
+    const rows = reactive(Array<any>())
+    const columns = reactive(Array<string>())
+
+    const meta = reactive({
+        current_page: NaN,
+        first_page: NaN,
+        last_page: NaN,
+        per_page: NaN,
+        total: NaN
+    })
+
+    const limit = ref(10)
+    const page = ref(1)
+    const sort_by = ref('')
+    const simple_search = ref('')
+
+    async function fetchFromApi() {
+        try { 
+            const data : any = (await axios.get(
+                '/employees',
+                {
+                    params: {
+                        limit: limit.value,
+                        page: page.value,
+                        sort_by: sort_by.value,
+                        simple_search: simple_search.value
+                    },
+                    headers: user.header
+                }
+            )).data
+
+            _assign(meta, data.meta)
+            _assign(rows, data.data)
+            _assign(columns, fetchColumns())
+            console.log("Employees: Fetched from api")
+        }
+        catch(err) {
+            console.log(err)
+        }
+    }
+
+    function fetchColumns() : string[] {
+        if(rows[0]){
+            return Object.keys(rows[0])
+        }
+        return []
+    }
+
+    function setLimit(pLimit : number) {
+        limit.value = pLimit
+    }
+
+    function setSortBy(pSortBy : string) {
+        sort_by.value = pSortBy
+    }
+
+    function setSimpleSearch(pSimpleSearch : string) {
+        simple_search.value = pSimpleSearch
+    }
+
+    function setPage(pPage : number) {
+        page.value = pPage
+    }
+
+    watch([limit, sort_by, simple_search, page], () => {
+        fetchFromApi()
+    })
+
+    onMounted(() => {
+        fetchFromApi()
+    })
+
+    return {
+        rows, columns, meta,
+        limit, page, sort_by, simple_search,
+        fetchFromApi,
+        setLimit,
+        setSortBy,
+        setSimpleSearch,
+        setPage
+    }
+
+})
+
+/* 
 export const useEmployees = defineStore('employees', {
     state: () => {
         return { 
             /**
             *   @type any[]
-             */
+             
             rows: Array<any>(),
 
             meta: {
@@ -37,7 +124,7 @@ export const useEmployees = defineStore('employees', {
         *   @param: {number} page           - QueryString: page=1 etc.
         *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
         *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
-        **/
+        **
         async fetchFromApi() {
             try {
                 
@@ -88,4 +175,4 @@ export const useEmployees = defineStore('employees', {
             this.fetchFromApi()
         }
     }
-})
+}) */