diff --git a/20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/App.vue b/20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/App.vue similarity index 100% rename from 20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/App.vue rename to 20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/App.vue diff --git a/20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/assets/logo.png b/20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/assets/logo.png similarity index 100% rename from 20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/assets/logo.png rename to 20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/assets/logo.png diff --git a/20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/components/Count.vue b/20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/components/Count.vue similarity index 100% rename from 20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/components/Count.vue rename to 20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/components/Count.vue diff --git a/20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/main.js b/20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/main.js similarity index 100% rename from 20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/main.js rename to 20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/main.js diff --git a/20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/store/index.js b/20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/store/index.js similarity index 100% rename from 20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/store/index.js rename to 20_脚手架/vue_code/24.src_vuex_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/store/index.js diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/App.vue b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/App.vue similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/App.vue rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/App.vue diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/assets/logo.png b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/assets/logo.png similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/assets/logo.png rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/assets/logo.png diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/components/Count.vue b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/components/Count.vue similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/components/Count.vue rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/components/Count.vue diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/components/Person.vue b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/components/Person.vue similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/components/Person.vue rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/components/Person.vue diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/main.js b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/main.js similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/main.js rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/main.js diff --git a/20_脚手架/vue_code/25.src_求和案例_多组件共享数据/store/index.js b/20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/store/index.js similarity index 100% rename from 20_脚手架/vue_code/25.src_求和案例_多组件共享数据/store/index.js rename to 20_脚手架/vue_code/25.src_vuex_求和案例_多组件共享数据/store/index.js diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/App.vue b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/App.vue new file mode 100644 index 0000000..3dc2784 --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/App.vue @@ -0,0 +1,19 @@ + + + diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/assets/logo.png b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/assets/logo.png differ diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Count.vue b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Count.vue new file mode 100644 index 0000000..8967479 --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Count.vue @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Person.vue b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Person.vue new file mode 100644 index 0000000..7af6dde --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/components/Person.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/main.js b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/main.js new file mode 100644 index 0000000..abf3e27 --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/main.js @@ -0,0 +1,26 @@ +// 引入Vue +import Vue from "vue"; +// 引入App +import App from "./App"; +// 引入插件 +import vueResource from "vue-resource"; + +import store from './store' + +// 设置Vue +Vue.config.productionTip = false + +// 使用插件 +Vue.use(vueResource) + +// 实例化Vue +new Vue({ + components: { + App + }, + render: h => h(App), + store, + beforeCreate() { + Vue.prototype.$bus = this // 安装全局事件总线 + } +}).$mount('#app') diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/count.js b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/count.js new file mode 100644 index 0000000..b30a58f --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/count.js @@ -0,0 +1,35 @@ +// 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 + } + } +} \ No newline at end of file diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/index.js b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/index.js new file mode 100644 index 0000000..a11063b --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/index.js @@ -0,0 +1,72 @@ +// 用于创建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, + } +}) diff --git a/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/person.js b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/person.js new file mode 100644 index 0000000..501b29f --- /dev/null +++ b/20_脚手架/vue_code/26.src_vuex_求和案例_namespace/store/person.js @@ -0,0 +1,42 @@ +// 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 + } + } +} \ No newline at end of file diff --git a/20_脚手架/vue_code/src/components/Count.vue b/20_脚手架/vue_code/src/components/Count.vue index 60fffa8..8967479 100644 --- a/20_脚手架/vue_code/src/components/Count.vue +++ b/20_脚手架/vue_code/src/components/Count.vue @@ -3,7 +3,7 @@

当前求和为: {{ sum }}

当前求和放大10倍后为: {{ bigSum }}

我在{{ school }},学{{ subject }}

-

Person组件的总人数是:{{personList.length}}

+

Person组件的总人数是:{{ personList.length }}

+ + @@ -23,18 +26,29 @@ export default { }, computed: { personList() { - return this.$store.state.personList + return this.$store.state.personOptions.personList }, sum() { - return this.$store.state.sum + return this.$store.state.countOptions.sum + }, + firstPersonName() { + return this.$store.getters["personOptions/firstPersonName"] } - // ...mapState(['personList']), + }, methods: { add() { const personObj = {id: nanoid(), name:this.name} - this.$store.commit('ADD_PERSON', personObj) + 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') } } } diff --git a/20_脚手架/vue_code/src/store/count.js b/20_脚手架/vue_code/src/store/count.js new file mode 100644 index 0000000..b30a58f --- /dev/null +++ b/20_脚手架/vue_code/src/store/count.js @@ -0,0 +1,35 @@ +// 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 + } + } +} \ No newline at end of file diff --git a/20_脚手架/vue_code/src/store/index.js b/20_脚手架/vue_code/src/store/index.js index 1decd27..a11063b 100644 --- a/20_脚手架/vue_code/src/store/index.js +++ b/20_脚手架/vue_code/src/store/index.js @@ -4,56 +4,69 @@ 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 - ) - } -} +// 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) - } -} +// 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:'张三'} - ] -} +// const state = { +// sum: 0, +// school: '修仙学院', +// subject: '修仙', +// personList: [ +// {id: '001', name: '张三'} +// ] +// } // getters 用于对state中的数据进行加工,类似用computed -const getters = { - bigSum(state) { - return state.sum * 10 - } -} +// const getters = { +// bigSum(state) { +// return state.sum * 10 +// } +// } // 创建并导出store +// export default new Vuex.Store({ +// actions, +// mutations, +// state, +// getters +// }) + +// namespace形式的导出 export default new Vuex.Store({ - actions, - mutations, - state, - getters + modules: { + countOptions: countOptions, + personOptions: personOptions, + } }) diff --git a/20_脚手架/vue_code/src/store/person.js b/20_脚手架/vue_code/src/store/person.js new file mode 100644 index 0000000..501b29f --- /dev/null +++ b/20_脚手架/vue_code/src/store/person.js @@ -0,0 +1,42 @@ +// 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 + } + } +} \ No newline at end of file