parent
72cc979d5d
commit
91a7f8196e
13 changed files with 148 additions and 281 deletions
@ -1,19 +1,32 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<Count/> |
<div class="row"> |
||||||
<Person/> |
<div class="col-xs-offset-2 col-xs-8"> |
||||||
|
<div class="page-header"><h2>Vue Router Demo</h2></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-xs-2 col-xs-offset-2"> |
||||||
|
<div class="list-group"> |
||||||
|
<router-link class="list-group-item" active-class="active" to="/about">About</router-link> |
||||||
|
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
||||||
|
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
||||||
|
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-xs-6"> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panel-body"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Count from "@/components/Count.vue"; |
|
||||||
import Person from "@/components/Person.vue"; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "App", |
name: "App", |
||||||
components: {Person, Count}, |
|
||||||
mounted() { |
|
||||||
console.log('App', this) |
|
||||||
} |
|
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|||||||
@ -0,0 +1,13 @@ |
|||||||
|
<template> |
||||||
|
<h2>我是About的内容</h2> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "About" |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,54 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>当前求和为: {{ sum }}</h1> |
|
||||||
<h3>当前求和放大10倍后为: {{ bigSum }}</h3> |
|
||||||
<h3>我在{{ school }}，学{{ subject }}</h3> |
|
||||||
<h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3> |
|
||||||
<select v-model.number="n"> |
|
||||||
<option value="1">1</option> |
|
||||||
<option value="2">2</option> |
|
||||||
<option value="3">3</option> |
|
||||||
</select> |
|
||||||
<button @click="add(n)">+</button> |
|
||||||
<button @click="sub(n)">-</button> |
|
||||||
<button @click="addOdd(n)">当前求和为奇数再加</button> |
|
||||||
<button @click="addWait(n)">等一等再加</button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {mapState, mapGetters, mapMutations, mapActions} from "vuex"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Count", |
|
||||||
data() { |
|
||||||
return { |
|
||||||
n: 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
console.log('Count', this) |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
...mapState('countOptions', ['sum', 'school', 'subject']), // 数组写法 |
|
||||||
...mapState('personOptions', ['personList']), // 数组写法 |
|
||||||
// ...mapState({sum: 'sum', school: 'school', subject: 'subject'}), // 对象写法 |
|
||||||
|
|
||||||
...mapGetters('countOptions', {bigSum: 'bigSum'}) |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
...mapMutations('countOptions', {add: 'vuexAdd', sub: 'vuexSub'}), // 对象写法 |
|
||||||
// ...mapMutations(['vuexAdd', 'vuexSub']), //数组写法 |
|
||||||
|
|
||||||
...mapActions('countOptions', {addOdd: 'vuexAddOdd', addWait: 'vuexAddWait'}), |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
button { |
|
||||||
margin-left: 5px |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<template> |
||||||
|
<h2>我是Home的内容</h2> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "Home" |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,59 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>人员列表</h1> |
|
||||||
<h3 style="color: red">Count组件的求和为：{{sum}}</h3> |
|
||||||
<h3>列表中第一个人的名字： {{firstPersonName}}</h3> |
|
||||||
<input type="text" placeholder="请输入名字" v-model="name"> |
|
||||||
<button @click="add">添加</button> |
|
||||||
<button @click="addWang">添加一个姓王的人</button> |
|
||||||
<button @click="addPersonServer">添加一个人名字随机</button> |
|
||||||
<ul> |
|
||||||
<li v-for="p in personList" :key="p.id">{{ p.name }}</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {mapState} from 'vuex' |
|
||||||
import {nanoid} from "nanoid"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Person", |
|
||||||
data() { |
|
||||||
return { |
|
||||||
name:'' |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
personList() { |
|
||||||
return this.$store.state.personOptions.personList |
|
||||||
}, |
|
||||||
sum() { |
|
||||||
return this.$store.state.countOptions.sum |
|
||||||
}, |
|
||||||
firstPersonName() { |
|
||||||
return this.$store.getters["personOptions/firstPersonName"] |
|
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
methods: { |
|
||||||
add() { |
|
||||||
const personObj = {id: nanoid(), name:this.name} |
|
||||||
this.$store.commit('personOptions/ADD_PERSON', personObj) |
|
||||||
this.name = '' |
|
||||||
}, |
|
||||||
addWang() { |
|
||||||
const personObj = {id: nanoid(), name:this.name} |
|
||||||
this.$store.dispatch('personOptions/addPersonWang', personObj) |
|
||||||
this.name = '' |
|
||||||
}, |
|
||||||
addPersonServer() { |
|
||||||
this.$store.dispatch('personOptions/addPersonServer') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import VueRouter from "vue-router"; |
||||||
|
|
||||||
|
// 引入组件
|
||||||
|
import About from "../components/About.vue" |
||||||
|
import Home from "../components/Home.vue" |
||||||
|
|
||||||
|
// 创建一个路由器
|
||||||
|
export default new VueRouter({ |
||||||
|
routes: [ |
||||||
|
{ |
||||||
|
path: '/about', |
||||||
|
component: About |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/home', |
||||||
|
component: Home |
||||||
|
}, |
||||||
|
] |
||||||
|
}) |
||||||
@ -1,35 +0,0 @@ |
|||||||
// count相关的设置
|
|
||||||
export default { |
|
||||||
namespaced: true, |
|
||||||
actions: { |
|
||||||
vuexAddOdd(context, value) { |
|
||||||
if (context.state.sum % 2) { |
|
||||||
context.commit('vuexAdd', value) |
|
||||||
} |
|
||||||
}, |
|
||||||
vuexAddWait(context, value) { |
|
||||||
setTimeout(() => { |
|
||||||
context.commit('vuexAdd', value) |
|
||||||
}, 1000 |
|
||||||
) |
|
||||||
} |
|
||||||
}, |
|
||||||
mutations: { |
|
||||||
vuexAdd(state, value) { |
|
||||||
state.sum += value |
|
||||||
}, |
|
||||||
vuexSub(state, value) { |
|
||||||
state.sum -= value |
|
||||||
}, |
|
||||||
}, |
|
||||||
state: { |
|
||||||
sum: 0, |
|
||||||
school: '修仙学院', |
|
||||||
subject: '修仙', |
|
||||||
}, |
|
||||||
getters: { |
|
||||||
bigSum(state) { |
|
||||||
return state.sum * 10 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
// 用于创建vue中核心 store
|
|
||||||
// 引入Vue
|
|
||||||
import Vue from "vue"; |
|
||||||
// 引入vuex
|
|
||||||
import Vuex from 'vuex' |
|
||||||
|
|
||||||
import countOptions from './count' |
|
||||||
import personOptions from './person' |
|
||||||
|
|
||||||
// 应用Vuex插件
|
|
||||||
Vue.use(Vuex) |
|
||||||
|
|
||||||
// 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中
|
|
||||||
// const actions = {
|
|
||||||
// vuexAddOdd(context, value) {
|
|
||||||
// if (context.state.sum % 2) {
|
|
||||||
// context.commit('vuexAdd', value)
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// vuexAddWait(context, value) {
|
|
||||||
// setTimeout(() => {
|
|
||||||
// context.commit('vuexAdd', value)
|
|
||||||
// }, 1000
|
|
||||||
// )
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
//准备mutations-用于操作数据
|
|
||||||
// const mutations = {
|
|
||||||
// vuexAdd(state, value) {
|
|
||||||
// state.sum += value
|
|
||||||
// },
|
|
||||||
// vuexSub(state, value) {
|
|
||||||
// state.sum -= value
|
|
||||||
// },
|
|
||||||
// ADD_PERSON(state, personObj) {
|
|
||||||
// state.personList.unshift(personObj)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
//准备state-用于存储数据
|
|
||||||
// const state = {
|
|
||||||
// sum: 0,
|
|
||||||
// school: '修仙学院',
|
|
||||||
// subject: '修仙',
|
|
||||||
// personList: [
|
|
||||||
// {id: '001', name: '张三'}
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
|
|
||||||
// getters 用于对state中的数据进行加工，类似用computed
|
|
||||||
// const getters = {
|
|
||||||
// bigSum(state) {
|
|
||||||
// return state.sum * 10
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 创建并导出store
|
|
||||||
// export default new Vuex.Store({
|
|
||||||
// actions,
|
|
||||||
// mutations,
|
|
||||||
// state,
|
|
||||||
// getters
|
|
||||||
// })
|
|
||||||
|
|
||||||
// namespace形式的导出
|
|
||||||
export default new Vuex.Store({ |
|
||||||
modules: { |
|
||||||
countOptions: countOptions, |
|
||||||
personOptions: personOptions, |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
// count相关的设置
|
|
||||||
|
|
||||||
import axios from "axios"; |
|
||||||
import {nanoid} from "nanoid"; |
|
||||||
export default { |
|
||||||
namespaced: true, |
|
||||||
actions: { |
|
||||||
addPersonWang(context, value) { |
|
||||||
if (value.name.indexOf('王') === 0) { |
|
||||||
context.commit('ADD_PERSON', value) |
|
||||||
}else{ |
|
||||||
alert('添加的人必须姓王！') |
|
||||||
} |
|
||||||
}, |
|
||||||
addPersonServer(context) { |
|
||||||
axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then( |
|
||||||
response => { |
|
||||||
context.commit('ADD_PERSON', {id: nanoid(), name: response.data}) |
|
||||||
|
|
||||||
}, |
|
||||||
error => { |
|
||||||
alert(error.message) |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
}, |
|
||||||
mutations: { |
|
||||||
ADD_PERSON(state, personObj) { |
|
||||||
state.personList.unshift(personObj) |
|
||||||
} |
|
||||||
}, |
|
||||||
state: { |
|
||||||
personList: [ |
|
||||||
{id: '001', name: '张三'} |
|
||||||
] |
|
||||||
}, |
|
||||||
getters: { |
|
||||||
firstPersonName(state) { |
|
||||||
return state.personList[0].name |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue