每天一点VUE（DAY 9-VUE2篇）

目录

1、使用axios发送网络请求

2、插槽相关

2.1、默认插槽

2.2、具名插槽

2.3、作用域插槽

3、Vuex的开发环境

3.1、第一步：下载Vuex

3.2、创建vuex的开发环境

4、Vuex的使用

4.1、vuex的基本使用

4.2、getter是使用

4.3、mapState和mapGetters的使用

4.4、mapActions和mapMutations

---

1、使用axios发送网络请求

        

//第一步：下载axios
npm i axios

//引入axios
import axios from "axios"

//发送get
axios.get("url").then(res=>{console.log(res)})
                .catch(err=>{console.log(err)})

//发送post
axios.post("url",{data:data}).then(res=>{console.log(res)})
                             .catch(err=>{console.log(err)})

关于axios的好的文章

（还有还多发送网络请求的必入vue-resource的，推荐使用axios）

2、插槽相关 2.1、默认插槽

//App.vue

//Page01.vue

2.2、具名插槽

        当我的这个页面需要插入多个东西时，就需要给插槽起名字，让他插到合适的位置。

//App.vue

//Page01.vue

2.3、作用域插槽

        当我们要展示的数据在插槽里面的时候，会产生作用域的问题，所以需要我们吧插槽内的数据送到使用插槽的地方

//Page.vue

//App.vue

3、Vuex的开发环境

 

        Vuex就是吧一些公共的数据用vuex来管理，然后所有组件就都可以获取和处理这些数据了。

        3.1、第一步：下载Vuex

//注意：vue2只能使用vuex3的版本，vue3使用vuex4版本，
//所以这里我们下在vuex3版本
npm i vuex@3

        3.2、创建vuex的开发环境

//在src下创建一个store的文件夹，在文件夹里创建一个index.js，内容如下

import Vuex from "vuex"
import Vue from "vue"
/*在这里使用vuex插件的原因是，如果在main.js里面引入这个文件，
    他会在vue实例创建之前执行这个文件，然后就白干了
*/
Vue.use(Vuex)

const actions = {}
const mutations = {}
const state = {}

export default new Vuex.Store({
    actions,
    mutations,
    state
})

//main.js文件里面引入store，然后在传入配置项store
import Vue from 'vue'
import App from './App.vue'

import store from "./store"

Vue.config.productionTip = false

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

4、Vuex的使用         4.1、vuex的基本使用

我们可以通过store的dispatch（派遣），吧数据传到actions里面，然后进行一些业务逻辑，之后，在通过commit吧数据发送到mutations（改变）里面，然后在mutations里面可以直接 *** 作state，如果我们不需要进行业务逻辑，就直接调用commit就行。

//Page01.vue

// src/store/index.js

import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)

const actions = {
    unadd(context,value){
        context.commit('UNADD',value)
    }
}
const mutations = {
    ADD(state,value){
        state.num += value;
    },
    UNADD(state,value){
        setTimeout(() => {
            state.num -= value
        }, 500);
    }
}
const state = {
    num:0,
}

export default new Vuex.Store({
    actions,
    mutations,
    state
})

4.2、getter是使用

        这个配置项是可选配置项，作用类似于vue重的computed属性，可以说属于vuex的computed属性,当然，简单的处理我们可以使用vue的computed属性来做，复杂的运算，最好放在getters里面，作为一个公共的值。

//Page01.vue

// src/store/index.js
import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)

const actions = {}
const mutations = {}
const state = {
    name:'potkiss',
    age:90
}
const getters = {
    numTimes10(value){
        return value.age * 10 
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

4.3、mapState和mapGetters的使用

        这里用到的...是将对象里面的值展开了，有两种写法，一种是对象写法，一种是数组写法,当然，如果不嫌麻烦可以自己封装函数或者使用computed属性弄出，最终要实现的就是，让模版里面的内容简化。

//Page.vue页面

// src/store/index.js

import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)

const actions = {}
const mutations = {}
const state = {
    name:'potkiss',
    age:90
}
const getters = {
    numTimes10(value){
        return value.age * 10 
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

4.4、mapActions和mapMutations

        这两个是为了简写调用的methos函数，注意，传参数要在模版里面传入。

//Page01.vue

// src/store/index.js

import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)

const actions = {
    unadd(minState,value){
        setTimeout(() => {
        minState.commit('UNADD',value)
        }, 1000);
    },
}
const mutations = {
    ADD(state,value){
        state.num += value
    },
    UNADD(state,value){
        state.num -= value
    }
}
const state = {
    num:0,
}
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

        第一步，在src/store文件夹下创建想要的模块的js文件，第二步，在src/store/index.js里面引入这些模块，并且使用module配置项，配置这俩模块。第三步，打开命名空间，使用data的数据。

//src/store/index.js

import Vuex from "vuex"
import Vue from "vue"
import page01 from "./page01"
import page02 from "./page02"
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        page01,
        page02
    }
})

//page01.js，模块1
export default {
    namespaced:true,
    //namespaced这个属性可以让模块化后的vuex的state读取变得容易
    actions:{
        TimeAdd(minState,value){
            setTimeout(() => {
                console.log(minState)
                minState.commit('TIMEADD',value)
            }, 1000);
        }
    },
    mutations:{
        TIMEADD(state,value){
            state.num  += value
        }
    },
    state:{
        num:9,
        List:[1,2]
    }
}

//page02.js 模块2
export default {
    namespaced:true,
    //namespaced这个属性可以让模块化后的vuex的state读取变得容易
    actions:{},
    mutations:{
        ADD(state,value){
            state.num +=value
        }
    },
    state:{
        num:90,
        List:[3,4]
    },
    getters:{
        sum(value){
            return value.List[0] + value.List[1]
        }
    }
}

后面是使用的两种写法，一种是简写的，另一种是不简写的

/*简写的
    使用了mapState,mapMutations,mapGetters,mapActions这四个简写的形式
*/

/*不简写的
    需要注意模块化后的getters和methods的使用
*/