Vue学习笔记63--vuex模块化 + namespace

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>