vue2_frontend...

src/components/todo/ListComponent.vue

@@ -55,20 +55,20 @@
       :sort-by.sync="sortBy"
       :sort-desc.sync="sortDesc"
       @sort-changed="sortClick"
-      label-sort-asc=""
-      label-sort-desc=""
-      label-sort-clear=""
-      :select-mode="selectedRowMode"
-      selectable
       @row-selected="rowSelectedToggle"
-      :sticky-header="commonTableAttributes.stickyHeader"
-      :no-border-collapse="commonTableAttributes.noBorderCollapse"
-      :striped="commonTableAttributes.striped"
-      :hover="commonTableAttributes.hover"
-      :no-local-sorting="commonTableAttributes.noLocalSorting"
-      :bordered="commonTableAttributes.bordered"
-      :dark="commonTableAttributes.dark"
-      :head-variant="commonTableAttributes.headVariant"
+      :sticky-header="tableAttributes.stickyHeader"
+      :no-border-collapse="tableAttributes.noBorderCollapse"
+      :striped="tableAttributes.striped"
+      :hover="tableAttributes.hover"
+      :no-local-sorting="tableAttributes.noLocalSorting"
+      :bordered="tableAttributes.bordered"
+      :dark="tableAttributes.dark"
+      :head-variant="tableAttributes.headVariant"
+      :label-sort-asc="tableAttributes.labelSortAsc"
+      :label-sort-desc="tableAttributes.labelSortDesc"
+      :label-sort-clear="tableAttributes.labelSortClear"
+      :select-mode="tableAttributes.selectedRowMode"
+      :selectable="tableAttributes.selectable"
     >
       <!-- Field별 Filter용 -->
       <template #head(rowSelect)>
@@ -143,7 +143,10 @@ export default {
   computed: {
     ...todoStore.mapState(['total', 'rows', 'fields'])
   },
-  data: () => {
+  created() {
+    this.setDatas()
+  },
+  data() {
     return {
       page: 1, // 현재 페이지
       perPage: process.env.VUE_APP_TABLE_DEFAULT_PERPAGE, // 페이지당 보여줄 갯수
@@ -154,17 +157,6 @@ export default {
         { text: '60줄', value: 60 },
         { text: '100줄', value: 100 }
       ],
-      // 속성옵션
-      commonTableAttributes: {
-        stickyHeader: '50%',
-        //noBorderCollapse: false,
-        striped: true,
-        hover: true,
-        noLocalSorting: true,
-        bordered: true,
-        dark: false,
-        headVariant: 'light'
-      },
       sortBy: 'id',
       sortDesc: true,
       search: null,
@@ -175,9 +167,9 @@ export default {
       ],
       filter: null,
       filterField: null,
+      filterDateField: 'createdAt',
       filterDateStart: null,
       filterDateEnd: null,
-      filterDateField: 'createdAt',
       filterDateFieldOptions: [
         { text: '수정일', value: 'updatedAt' },
         { text: '등록일', value: 'createdAt' }
@@ -185,7 +177,21 @@ export default {
       filterIsDone: '',
       selectedRows: [],
       selectedRowAllToggle: false,
-      selectedRowMode: 'multi' //'multi', 'single', 'range'
+      tableAttributes: {
+        stickyHeader: '50%',
+        //noBorderCollapse: false,
+        striped: true,
+        hover: true,
+        noLocalSorting: true,
+        bordered: true,
+        dark: false,
+        headVariant: 'light',
+        labelSortAsc: '',
+        labelSortDesc: '',
+        labelSortClear: '',
+        selectable: true,
+        selectedRowMode: 'multi' //'multi', 'single', 'range'
+      }
     }
   },
   methods: {

src/store/auth.store.js

@@ -62,7 +62,7 @@ const mutations = {
   }
 }
 const actions = {
-  register: async function (commit) {
+  register: async function (context) {
     const params = {
       email: this.form.email,
       password: this.form.password,
@@ -71,25 +71,25 @@ const actions = {
     await api.post('/auth/register', params).then((response) => {
       const { data } = response
       if (data.access_token) {
-        commit('login', data)
+        context.commit('login', data)
       }
     })
   },
-  login: async function ({ commit, state }) {
+  login: async function ({ context, state }) {
     const params = { email: state.form.email, password: state.form.password }
     console.log(params)
     await api.post('/auth/login', params).then((response) => {
       const { data } = response
       if (data.access_token) {
-        commit('login', data)
+        context.commit('login', data)
       }
     })
   },
-  logout: function (commit) {
-    return commit('logout')
+  logout: function (context) {
+    return context.commit('logout')
   },
-  reload: function (commit, access_token) {
-    return commit('reload', access_token)
+  reload: function (context, access_token) {
+    return context.commit('reload', access_token)
   }
 }
 export default { namespaced: true, state, getters, mutations, actions }

src/store/todo.store.js

@@ -61,10 +61,10 @@ const mutations = {
   }
 }
 const actions = {
-  setDatas: async function (commit, params) {
+  setDatas: async function (context, params) {
     await api.get('/todo', { params: params }).then((response) => {
       const { data } = response
-      commit('setDatas', data)
+      context.commit('setDatas', data)
     })
   }
 }