RogerWorkPC
/
vue3_element_demo1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成 Table Demo 1

Browse Source
main
roger_home_pc 1 year ago
parent 2190969935
commit 8019adc589
9 changed files with 51 additions and 326 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/App.vue
  2. 5
      src/main.js
  3. 21
      src/router/index.js
  4. 37
      src/store/index.js
  5. 22
      src/store/modules/ModuleA.js
  6. 23
      src/store/modules/ModuleB.js
  7. 79
      src/views/CompositionAPIView.vue
  8. 150
      src/views/OptionsAPIView.vue
  9. 36
      src/views/Table_Demo1.vue

4
src/App.vue
Unescape View File

@ -1,8 +1,6 @@
<template>
<div>
<router-link :to="{name:'options'}">OptionsAPI</router-link>
|
<router-link :to="{name:'composition'}">CompositionAPI</router-link>
<router-link :to="{name:'table1'}">Table Demo 1</router-link>
</div>
<div>
<router-view></router-view>

5
src/main.js
Unescape View File

@ -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')

21
src/router/index.js
Unescape View File

@ -1,23 +1,24 @@
// 引入必要的router组件
import {createRouter, createWebHistory} from 'vue-router'
// 引入视图
const OptionsAPI = () => import('../views/OptionsAPIView.vue')
const CompositionAPI = () => import('../views/CompositionAPIView.vue')
// const root = () => import('../App.vue')
const tableDemo1 = () => import('../views/Table_Demo1.vue')
// 引入组件
// 创建路由
const routes = [
// {
// path: "/",
// name: 'root',
// component: root
// },
{
path: '/options',
name: 'options',
component: OptionsAPI
},
{
path: '/composition',
name: 'composition',
component: CompositionAPI
path: '/table1',
name: 'table1',
component: tableDemo1
},
]

37
src/store/index.js
Unescape View File

@ -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)
}
}
})

22
src/store/modules/ModuleA.js
Unescape View File

@ -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})
}
}
}
}

23
src/store/modules/ModuleB.js
Unescape View File

@ -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})
}
},
}
}

79
src/views/CompositionAPIView.vue
Unescape View File

@ -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>

150
src/views/OptionsAPIView.vue
Unescape View File

@ -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>

36
src/views/Table_Demo1.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save