完成 Table Demo 1

1 year ago · 8019adc589
parent 2190969935
commit 8019adc589
9 changed files with 51 additions and 326 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,8 +1,6 @@
 <template>
  <div>
-    <router-link :to="{name:'options'}">OptionsAPI</router-link>
+    <router-link :to="{name:'table1'}">Table Demo 1</router-link>
    |
    <router-link :to="{name:'composition'}">CompositionAPI</router-link>
  </div>
  <div>
    <router-view></router-view>
--- a/src/main.js
+++ b/src/main.js
@ -1,6 +1,7 @@
 import {createApp} from "vue";
 import App from "./App.vue"
 import router from './router'
-import store from './store'
+import ElementPlus from "element-plus"
 import "element-plus/dist/index.css"
-createApp(App).use(router).use(store).mount('#app')
+createApp(App).use(ElementPlus).use(router).mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,23 +1,24 @@
 // 引入必要的router组件
 import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
-const OptionsAPI = () => import('../views/OptionsAPIView.vue')
+// const root = () => import('../App.vue')
-const CompositionAPI = () => import('../views/CompositionAPIView.vue')
+const tableDemo1 = () => import('../views/Table_Demo1.vue')
 // 引入组件
 // 创建路由
 const routes = [
    // {
    //     path: "/",
    //     name: 'root',
    //     component: root
    // },
    {
-        path: '/options',
+        path: '/table1',
-        name: 'options',
+        name: 'table1',
-        component: OptionsAPI
+        component: tableDemo1
    },
    {
        path: '/composition',
        name: 'composition',
        component: CompositionAPI
    },
 ]
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,37 +0,0 @@
 import {createStore} from "vuex";
 import {moduleA} from "@/store/modules/ModuleA";
 import {moduleB} from "@/store/modules/ModuleB";
 export default createStore({
    modules: {
        module_a: moduleA,
        module_b: moduleB,
    },
    state: {
        count: 3,
    },
    getters: {
        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
        getter: (state) => (n) => {
            return state.count * n;
        },
    },
    mutations: {
        // payload用于携带参数
        mutation(state, payload) {
            state.count += payload.num
        }
    },
    actions: {
        action(content, payload) {
            // 模拟异步操作
            setTimeout(() => {
                // rep 模拟axios请求返回的数据
                const rep = 3;
                if (content.state.count > 50) {
                    content.commit('mutation', {num: rep + payload.num});
                }
            }, 1000)
        }
    }
 })
--- a/src/store/modules/ModuleA.js
+++ b/src/store/modules/ModuleA.js
@ -1,22 +0,0 @@
 export const moduleA = {
    state: {
        state_a: 1,
    },
    getters: {
        getter_a: (state) => {
            return state.state_a + 10;
        }
    },
    mutations: {
        mutation_a(state, payload) {
            state.state_a += payload.num;
        }
    },
    actions: {
        action_a(content, payload) {
            if (content.state.state_a > 50) {
                content.commit('mutation_a', {num: payload.num})
            }
        }
    }
 }
--- a/src/store/modules/ModuleB.js
+++ b/src/store/modules/ModuleB.js
@ -1,23 +0,0 @@
 export const moduleB = {
    namespaced: true,
    state: {
        state_b: 2,
    },
    getters: {
        getter_b: (state) => {
            return state.state_b + 10;
        }
    },
    mutations: {
        mutation_b: (state, payload) => {
            state.state_b += payload.num;
        }
    },
    actions: {
        action_b: (content, payload) => {
            if (content.state.state_b > 50) {
                content.commit('mutation_b', {num: payload.num})
            }
        },
    }
 }
--- a/src/views/CompositionAPIView.vue
+++ b/src/views/CompositionAPIView.vue
@ -1,79 +0,0 @@
 <template>
  <!-- 对state的操作 -->
  <h3>对state的操作</h3>
  <p><span><b>根-store.state.count: </b></span>{{ store.state.count }}</p>
  <p><span><b>A-store.state.state_a: </b></span>{{ store.state.module_a.state_a }}</p>
  <p><span><b>B-store.state.module_b.state_b: </b></span>{{ store.state.module_b.state_b }}</p>
  <!-- 对getters的操作 -->
  <h3>对getters的操作</h3>
  <p><span><b>根-store.getters.getter(3): </b></span>{{ store.getters.getter(3) }}</p>
  <p><span><b>A-store.getters.getter_a: </b></span>{{ store.getters.getter_a }}</p>
  <p><span><b>B-store.getters['module_b/getter_b']: </b></span>{{ store.getters['module_b/getter_b'] }}</p>
  <!-- 对mutations的操作 -->
  <h3>对mutations的操作</h3>
  <p><span><b>根-store.commit('mutation', {num: 7}): </b></span>
    <button @click="root_mutation">点一下根store+7</button>
  </p>
  <p><span><b>A-store.commit('mutation_a', {num: 8}): </b></span>
    <button @click="moduleA_mutation">点一下state_a+8</button>
  </p>
  <p><span><b>B-store.commit('module_b/mutation_b', {num: 9}): </b></span>
    <button @click="moduleB_mutation">点一下state_b+9</button>
  </p>
    <!-- 对actions的操作 -->
    <h3>对actions的操作</h3>
    <p><span><b>根-store.dispatch('action', {num: 7}): </b></span>
      <button @click="root_action">如果store>50 点一下store+10</button>
    </p>
    <p><span><b>A-store.dispatch('action_a', {num: 8}): </b></span>
      <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
    </p>
    <p><span><b>B-store.dispatch('module_b/action_b', {num: 9}): </b></span>
      <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
    </p>
 </template>
 <script setup>
 import {useStore} from "vuex";
 // 实例化useStore对象
 const store = useStore()
 // 根store的mutation操作
 const root_mutation = () => {
  store.commit('mutation', {num: 7})
 }
 // moduleA的mutation操作
 const moduleA_mutation = () => {
  store.commit('mutation_a', {num: 8})
 }
 // moduleB的mutation操作
 const moduleB_mutation = () => {
  store.commit('module_b/mutation_b', {num: 9})
 }
 // 根store的action操作
 const root_action = () => {
  store.dispatch('action', {num: 7})
 }
 // moduleA的action操作
 const moduleA_action = () => {
  store.dispatch('action_a', {num: 8})
 }
 // moduleB的action操作
 const moduleB_action = () => {
  store.dispatch('module_b/action_b', {num: 9})
 }
 </script>
 <style scoped>
 </style>
--- a/src/views/OptionsAPIView.vue
+++ b/src/views/OptionsAPIView.vue
@ -1,150 +0,0 @@
 <template>
  <!-- 对state的操作 -->
  <h3>对state的操作</h3>
  <p><span><b>根-count: </b></span>{{ count }}</p>
  <p><span><b>A-state_a: </b></span>{{ state_a }}</p>
  <p><span><b>B-state_b: </b></span>{{ state_b }}</p>
  <!-- 对getters的操作 -->
  <h3>对getters的操作</h3>
  <p><span><b>根-getter(3): </b></span>{{ getter(3) }}</p>
  <p><span><b>A-getter_a: </b></span>{{ getter_a }}</p>
  <p><span><b>B-getter_b: </b></span>{{ getter_b }}</p>
  <!-- 对mutations的操作 -->
  <h3>对mutations的操作</h3>
  <p><span><b>根-@click="mutation({num: 7})": </b></span>
    <button @click="mutation({num: 7})">点一下根store+7</button>
  </p>
  <p><span><b>A-@click="mutation_a({num: 8})": </b></span>
    <button @click="mutation_a({num: 8})">点一下state_a+8</button>
  </p>
  <p><span><b>B-@click="mutation_b({num: 9})": </b></span>
    <button @click="mutation_b({num: 9})">点一下moduleB+9</button>
  </p>
  <!-- 对actions的操作 -->
  <h3>对actions的操作</h3>
  <p><span><b>根-@click="action({num: 7})": </b></span>
    <button @click="action({num: 7})">如果store>50 点一下store+10</button>
  </p>
  <p><span><b>A-@click="action_a({num: 8})": </b></span>
    <button @click="action_a({num: 8})">如果state_a>50 点一下state_a+8</button>
  </p>
  <p><span><b>B-@click="action_b({num: 9})": </b></span>
    <button @click="action_b({num: 9})">如果state_b>50 点一下state_b+9</button>
  </p>
  <h3>混合用法</h3>
  <p><span><b>state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a: </b></span>{{
      state_b_getter_a
    }}</p>
  <p><span><b>state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"]: </b></span>{{
      state_a_getter_b
    }}</p>
  <p><span><b>state_b_getter_b: (state, getters) => state.state_b + getters.getter_b: </b></span>{{ state_b_getter_b }}
  </p>
  <p><span><b>@click="mutation_a_count(100): </b></span>
    <button @click="mutation_a_count(100)">如果state_a>50 点一下state_a+100</button>
  </p>
  <p><span><b>@click="action_b_count(200): </b></span>
    <button @click="action_b_count(200)">如果state_b>50 点一下state_b+200</button>
  </p>
 </template>
 <script>
 import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
 export default {
  name: "OptionsAPIView",
  // computed 用于 mapState和mapGetters
  computed: {
    // // 数组形式
    // // 映射全局state
    // ...mapState(["count", "state_a"]),  // state名称就是map后的名称，这里模块中的state是无法映射的
    // // 映射带有名称空间的state
    // ...mapState("module_b", ["state_b"]),  // 第一个参数为模块的别名
    //
    // // 映射全局Getters
    // ...mapGetters(["getter", "getter_a"]),
    // // 映射带有命名空间的Getters
    // ...mapGetters("module_b", ["getter_b"]),
    // 对象形式
    // 映射全局state和带有namespaced命名空间的state
    ...mapState({
      count: "count",
      state_a: state => state.module_a.state_a,
      // state_b: state => state.module_b.state_b
    }),
    // 指定命名空间的state映射
    ...mapState("module_b", {
      state_b: state => state.state_b
    }),
    // 映射全局Getters
    ...mapGetters({
      getter: "getter",
      getter_a: "getter_a"
    }),
    // 映射带有命名空间的Getters
    ...mapGetters("module_b", {
      getter_b: "getter_b",
    }),
    // 混合用法
    ...mapState({
      state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a,
      state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"],
    }),
    ...mapState("module_b", {
      state_b_getter_b: (state, getters) => state.state_b + getters.getter_b,
    })
  },
  methods: {
    // // 数组形式
    // // 映射全局的 mutations
    // ...mapMutations(["mutation", "mutation_a"]),
    // // 映射带有命名空间的mutations
    // ...mapMutations("module_b", ["mutation_b"]),
    // // 映射全局的 actions
    // ...mapActions(["action", "action_a"]),
    // // 映射带有命名空间的actions
    // ...mapActions("module_b", ["action_b"]),
    // 对象形式
    // 映射全局的mutations
    ...mapMutations({
      mutation: "mutation",
      mutation_a: "mutation_a",
    }),
    // 映射带有命名空间的mutations
    ...mapMutations("module_b", {
      mutation_b: "mutation_b",
    }),
    // 映射全局的actions
    ...mapActions({
      action: "action",
      action_a: "action_a"
    }),
    // 映射带有命名空间namespaced的actions
    ...mapActions("module_b", {
      action_b: "action_b"
    }),
    // 组合用法
    ...mapMutations({
      mutation_a_count: (commit, count) => commit("mutation_a", {num: count})
    }),
    ...mapActions("module_b", {
      action_b_count: (dispatch, count) => dispatch("action_b", {num: count})
    })
  }
 }
 </script>
 <style scoped>
 </style>
--- a/src/views/Table_Demo1.vue
+++ b/src/views/Table_Demo1.vue
@ -0,0 +1,36 @@
 <template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address" ></el-table-column>
  </el-table>
 </template>
 <script>
 export default {
  name: "Table_Demo1",
  data() {
    return {
      tableData: [
        { date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"},
        { date: "2016-05-04",
          name: "Tom1",
          address: "No. 1891, Grove St, Los Angeles"},
        { date: "2016-05-05",
          name: "Tom2",
          address: "No. 1892, Grove St, Los Angeles"},
        { date: "2016-05-06",
          name: "Tom3",
          address: "No. 1893, Grove St, Los Angeles"},
      ]
    }
  },
 }
 </script>
 <style scoped>
 </style>