Vue2 - 23-04-03

mapMutations和mapActions

mapMutations和mapActions 跟 mapState和mapGetters 很像
写法：

• ...mapMutations({methodName:'mutationName',methodName:'mutationName',...}) / ...mapMutations(['mutationName(==methodName)','mutationName(==methodName)',...])
• ...mapActions({methodName:'actionName',methodName:'actionName',...}) / ...mapActions(['actionName(==methodName)','actionName(==methodName)',...])

methods:{
            // 自己写mutations调用者方法
            /*increment() {
                this.$store.commit('increment',this.num)
                console.log(this);
            },
            decrement() {
                this.$store.commit('decrement',this.num)
            },*/
            // mapMutations写法：对象
            // ...mapMutations({increment:'increment',decrement:'decrement'}),
            // mapMutations写法：数组
            ...mapMutations(['increment','decrement']),

            // 自己写actions调用者方法
            /*
            incrementOdd(){
                this.$store.dispatch('incrementOdd',this.num)
            },
            incrementWait() {
                // setTimeout(()=>{
                //     this.$store.dispatch('incrementWait',this.num)
                // },3000)
                this.$store.dispatch('incrementWait',this.num)
            */
            // mapActions写法：对象
            // ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'})
            // mapActions写法：数组
            ...mapActions(['incrementOdd','incrementWait'])
}

vuex模块化写法与namespaced属性

引入并配置

首先要把独立配置项组合（标配四大件：actions、mutations、state、getters）的对象分开写，导入index.js，之后在配置Vuex.Store的时候，传入modules对象，每对key-value分别对应namespace:模块对象的名字

使用方式

在computed/methods中，使用mapXX的话与前面非模块化写法类似：

import {mapXXX,...} from 'vuex'
computed() {
    ...mapState('namespace',['stateName1','stateName2',...]),
    ...mapGetters('namespace',['gettersName1','gettersNames2',...])
}
methods() {
    ...mapActions('namespace',['actionsName1','actionsName2',...])
    ...mapMutations('namespace',['mutationsName1','mutationsName2',...])
}

手动写的话会麻烦很多

computed() {
    stateName1() {
        return this.$store.state.namespace.stateName1
    }
    gettersName1() {
        return this.$store.getters[namespace/gettersName1]
    }
}
methods() {
    actionsName1() {
        this.$store.dispatch('namespace/actionsName1',param)
    }
    mutationsName1() {
        this.$store.commit('namespace/mutationsName1',param)
    }
}

总结以及笔记

四个map方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改store.js

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

3. 开启命名空间后，组件中读取state数据：

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),

4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件，后端路由value是函数

配置并引入路由

//.../router/index.js
import VueRouter from 'vue-router'
import Vue from 'vue'
import VC from 'xxx/xxx'
Vue.use(VueRouter)
const vr = new VueRouter({
   routes:[
      {path: '/path', component: VC},
   ]
})
export default vr
//.../main.js
import vr from '.../router'
new Vue({
   router:vr
})

路由的使用

可以配合<router-view></router-view>和<router-link></router-link>一起使用，<router-view></router-view>为路由到的组件之后会插入的地方，<router-link></router-link>最后会解析成<a>标签

路由基本使用——总结

1.基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router

4. 实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

   <router-view></router-view>

2.几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由（多级路由）

1. 配置路由规则，使用children配置项：

   routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]

2. 跳转（要写完整路径）：

   <router-link to="/home/news">News</router-link>