vuex模块化 + namespace
示例一: 目录结构如下所示
main.js
1 // 引入Vue 2 import Vue from 'vue' 3 // 引入App 4 import App from './App.vue' 5 // 配置提示 6 Vue.config.productionTip = false 7 10 import store from './store'//默认引入index.js 13 14 // console.log('Vue.prototype==>', Vue.prototype) 15 // console.log('VueComponent.prototype.__proto__==>', Vue.prototype) 16 17 new Vue({ 18 render: h => h(App), store 19 20 }).$mount('#app')
App.vue
1 <template> 2 <div class="app"> 3 <Count /> 4 <hr> 5 <!-- <Person /> --> 6 <Person2 /> 7 </div> 8 </template> 9 10 <script> 11 // 引入组件 12 import Count from './components/Count.vue'; 13 import Person from './components/Person.vue'; 14 import Person2 from './components/Person2.vue'; 15 export default { 16 name: 'App', 17 components: { Count, Person, Person2 }, 18 19 20 } 21 </script> 22 23 <style scoped> 24 </style>
count.js==> namespaced: true,
1 /* 求和组件相关的配置 */ 2 // const countOptions = { 3 export default { 4 // 使用后,在应用的地方就可以直接使用 该配置对象中的属性了 5 namespaced: true, 6 actions: { 7 incrementOdd (context, value) { 8 if (context.state.sum % 2) { 9 context.commit('Increment', value)//等价于Increment 10 // context.commit('IncrementOdd', value)//等价于Increment 11 } 12 }, 13 incrementWait (context, value) { 14 setTimeout(() => { 15 context.commit('Increment', value)//等价于 IncrementWait 16 // context.commit('IncrementWait', value)//等价于Increment 17 }, 1000); 18 19 }, 20 }, 21 mutations: { 22 Increment (state, value) { 23 state.sum += value 24 }, 25 Decrement (state, value) { 26 state.sum -= value 27 }, 28 IncrementOdd (state, value) { 29 state.sum += value 30 }, 31 IncrementWait (state, value) { 32 state.sum += value 33 }, 34 }, 35 state: { 36 sum: 0,//当前的和 37 school: '高新一中', 38 subject: '语数外', 39 }, 40 getters: { 41 bigSum (state) { 42 return state.sum * 10 43 } 44 }, 45 } 46 47 // export default countOptions
person.js
1 import axios from "axios" 2 import { nanoid } from "nanoid" 3 4 /* 人员组件相关的配置 */ 5 export default { 6 // 使用后,在应用的地方就可以直接使用 该配置对象中的属性了 7 namespaced: true, 8 actions: { 9 addPersonWang (context, value) { 10 if (value.name.indexOf('王') === 0) { 11 context.commit('AddPerson', value) 12 } 13 else { 14 alert('请添加姓王的人') 15 } 16 }, 17 }, 18 mutations: { 19 AddPerson (state, value) { 20 state.personList.unshift(value) 21 }, 22 }, 23 state: { 24 personList: [{ id: '001', name: 'zhangsan' }] //数组 25 }, 26 getters: { 27 firstPersonName (state) { 28 return state.personList[0].name 29 } 30 }, 31 }
index.js
1 // 该文件用于创建vuex中最为核心的store 2 // 引入Vue 3 import Vue from 'vue' 4 // 引入vuex 5 import Vuex from 'vuex' 6 // 使用插件 7 Vue.use(Vuex) 8 9 10 import personOptions from './person' 11 import countOptions from './count' 12 13 // const store = new Vuex.Store({ //创建store 14 //创建并暴露store 15 export default new Vuex.Store({ 16 modules: { 17 countOptions, 18 personOptions, 19 } 20 }) 21 // 暴露store 22 // export default store
Count.vue
1 <template> 2 <div> 3 <h2 style="color: brown">------------求和组件">------------</h2> 4 <h3>当前求和*10为:{{ bigSum }}</h3> 5 <h3>当前求和为:{{ sum }}</h3> 6 <h3>我在:{{ school }},学习:{{subject }}</h3> 7 请选择数量:<select v-model.number="selectNo"> 8 <option value="1">1</option> 9 <option value="2">2</option> 10 <option value="3">3</option> 11 </select><br> 12 13 <button @click="increment(selectNo)">mutation对象方式+</button> 14 <button @click="decrement(selectNo)">mutation对象方式-</button> <br> 15 16 <button @click="Increment(selectNo)">mutation 数组方式+</button> 17 <button @click="Decrement(selectNo)">mutation 数组方式-</button><br> 18 19 <button @click="incrementOdd(selectNo)">当前为奇数再加</button> 20 <button @click="incrementWait(selectNo)">等一下再加</button> 21 22 <h3 style="color: brown">多组件共享数据展示,Person组件总人数是:{{personList.length }}</h3> 23 <ul> 24 <li v-for="p in personList" 25 :key="p.id">{{p.name}}</li> 26 </ul> 27 </div> 28 </template> 29 30 <script> 31 import { mapGetters, mapState, mapMutations, mapActions } from 'vuex' 32 33 export default { 34 name: 'Count', 35 data () { 36 return { 37 selectNo: 1,//当前选择的数字 38 } 39 }, 40 // 通过计算属性获取state数据 41 computed: { 42 // state 中获取数据 43 ...mapState('countOptions', ['sum', 'school', 'subject']), 44 ...mapState('personOptions', ['personList']), 45 46 // getters中获取数据 47 // ...mapGetters('countOptions', { bigSum: 'bigSum' }),//对象写法 48 ...mapGetters('countOptions', ['bigSum']),//对象写法 49 50 }, 51 mounted () { 52 console.log('count this==>', this) 53 console.log('count this.$store==>', this.$store) 54 }, 55 methods: { 56 // mutations 获取数据 中不建议已处理业务逻辑 57 ...mapMutations('countOptions', { increment: 'Increment', decrement: 'Decrement' }), //对象写法 58 ...mapMutations('countOptions', ['Increment', 'Decrement']), //数组写法(数组写法使用时,使用组件中的方法命名必须和mutations中的一致) 59 60 // actions中 获取数据 可处理业务逻辑 61 ...mapActions('countOptions', ['incrementOdd', 'incrementWait']), //数组写法 62 63 }, 64 65 } 66 </script> 67 68 <style scoped> 69 button { 70 margin: 6px; 71 } 72 </style>
Person.vue
1 <template> 2 <div> 3 <h2 style="color: brown">------------人员组件">------------</h2> 4 <h3 style="color: brown">多组件共享数据展示,Count组件求和结果是:{{sum }}</h3> 5 uuid==>{{ uuid }} <br> 6 nanoid==>{{nanoid}} 7 <h3>列表中第一个人员姓名是:{{ firstPersonName }} </h3> 8 <h3>人员信息列表</h3> 9 <input type="text" 10 placeholder="请输入姓名" 11 v-model="name"> 12 <button @click="addPerson()">添加</button> 13 <button @click="addPersonWang()">添加一个姓王的人</button> 14 <ul> 15 <li v-for="p in personList" 16 :key="p.id">{{p.name}}</li> 17 </ul> 18 </div> 19 </template> 20 21 <script> 22 // import { mapState } from 'vuex'; 23 import { mapGetters, mapState, mapMutations, mapActions } from 'vuex' 24 import { nanoid } from 'nanoid' 25 import { v4 as uuidv4 } from 'uuid'; 26 27 export default { 28 name: 'Person2', 29 data () { 30 return { 31 name: '', 32 uuid: uuidv4(), 33 nanoid: nanoid() 34 } 35 }, 36 computed: { 37 // personList () { 38 // return this.$store.state.personList 39 // this.$store.state.personOptions.personList 40 // }, 等价于下面写法 41 42 /* 三种写法 43 写法一:计算属性写法 44 写法二:对象写法 45 写法三:数组写法 46 */ 47 // 写法一:getters 48 // firstPersonName () { 49 // // const aa = this.$store.getters['personOptions/firstPersonName'] 50 // // console.log('log==>', aa) 51 // return this.$store.getters['personOptions/firstPersonName'] 52 // }, 53 54 // 写法二 55 // ...mapGetters('personOptions', { firstPersonName: 'firstPersonName' }),//对象写法 56 // 写法三 57 ...mapGetters('personOptions', ['firstPersonName']),//数组写法 58 59 60 // this.$store.state.countOptions.sum 61 ...mapState('countOptions', ['sum']), 62 63 // this.$store.state.personOptions.personList 64 ...mapState('personOptions', ['personList']), 65 66 67 }, 68 69 methods: { 70 addPerson () { 71 this.uuid = uuidv4() 72 73 const person = { id: nanoid(), name: this.name } 74 console.log('person obj==>', person) 75 //调用mutations中的新增方法 76 this.$store.commit('personOptions/AddPerson', person) 77 this.name = '' 78 }, 79 addPersonWang () { 80 const person = { id: nanoid(), name: this.name } 81 // 存在业务逻辑找actions 82 this.$store.dispatch('personOptions/addPersonWang', person) 83 this.name = '' 84 }, 85 }, 86 } 87 </script> 88 89 <style> 90 </style>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!