Vue2知识总结（从vuex到路由到el）终章

1：vuex：创建store。store包含commit、dispatch等函数，dispatch直接对话actions，commit直接对话mutations。

index.js

//引入vuex
import Vuex from'vuex'
import Vue from 'vue'
Vue.use(Vuex)

//响应组件中的动作
const actions={
    jia(context,value){
        context.commit('jia',value)
    },
    jian(context,value){
        context.commit('jian',value)
    },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('jia',value)
        }
    }
}
//用于操作数据state
const mutations={
    jia(state,value){
        state.sum+=value
    },
    jian(state,value){
        state.sum-=value
    }
}
//用于操作存储数据
const state={
    sum:0
}



//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入store
import store from './store'


new Vue({
  render: h => h(App),
  store
}).$mount('#app')

2：vuex求和案例

Count.vue

3：多组件共享数据

Count.vue

Person.vue

index.js

//引入vuex
import Vuex from'vuex'
import Vue from 'vue'
Vue.use(Vuex)

//响应组件中的动作
const actions={
    jia(context,value){
        context.commit('jia',value)
    },
    jian(context,value){
        context.commit('jian',value)
    },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('jia',value)
        }
    }
}
//用于操作数据state
const mutations={
    jia(state,value){
        state.sum+=value
    },
    jian(state,value){
        state.sum-=value
    },
    Add_person(state,value){
     state.PersonList.unshift(value)   
    }
}
//用于操作存储数据
const state={
    sum:0,
    PersonList:[
        {id:'001',name:'张三'}
    ]
}



//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

4：路由

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

About.vue

Home.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)


new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue(router-view展示组件在哪)

5：嵌套路由

Home.vue

Message.vue

News.vue

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[{
                path:'news',
                component:News
            },{
                path:'message',
                component:Message,
                children:[{
                    path:'detail',
                    component:Detail
                }]
            }]
        }
    ]
})

App.vue

 Detail.vue

6：命名路由+路由props

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[{
                path:'news',
                component:News
            },{
                path:'message',
                component:Message,
                children:[{
                    name:'xiangqing',
                    path:'detail',
                    component:Detail,
                    //props的第一种对象，值为对象，该对象的所有值都会以props形式传给Detail组件
                    //props:{a:1,b:'hello'}
                    //props的第二种写法，值为布尔值，将所有参数传给Detail
                    //props:true
                    //props第三种写法，值为函数
                    props($route){
                        console.log($route)
                        return {id:$route.query.id,title:$route.query.title}
                    }
                }]
            }]
        }
    ]
})

Detail.vue

7：