parent
72cc979d5d
commit
91a7f8196e
13 changed files with 148 additions and 281 deletions
@ -1,19 +1,32 @@ |
||||
<template> |
||||
<div> |
||||
<Count/> |
||||
<Person/> |
||||
<div class="row"> |
||||
<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> |
||||
</template> |
||||
|
||||
<script> |
||||
import Count from "@/components/Count.vue"; |
||||
import Person from "@/components/Person.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Person, Count}, |
||||
mounted() { |
||||
console.log('App', this) |
||||
} |
||||
} |
||||
</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