vuex的实践，看了你就会用！

在正式写vuex前  我想给分享一个关于性能优化的小东西  如下：

有时候当我们在项目中点击跳转路由时 当那个路由界面非常复杂时 为了缩小白屏时间 我们可以使用webpack提供的代码切割方式对该组件代码进行切割
具体代码如下：
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
这是es6写法

不习惯的话可以转成Es5
var home = function(r){
require.ensure([],function(){
return r(require('../page/home/home'),'home')
})
}
  {
            path: '/home',
            component: home
        },

这样只有当我点击了该路由路径  才会去加载该组件到js中  而不是随着界面一打开就require 全部组件

OK 下面正式说说vuex

光说不练记忆不深 我觉得还是以小demo的方式来讲比较易懂些！

案例结构如上：

第一步：

        先npm i vuex到指定的目录下

第二步：

        在入口文件main.js中 import vuex  并使用vue.use()注册

具体如下：

import Vue from 'vue'
import Vuex from 'vuex'
import VueTestApp from './vueTesxtApp'
import store from './store/index' //这个为store仓库  下一步创建
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
  el: '#app',
store,
components: { VueTestApp },
template: '<VueTestApp/>'

})

第三步：创建我们仓库咯 store    由于在项目中我们需要好的可读性，因此我们将vuex.Store({})中的state、getters、mutations、actions单独建立js文件

src/store/index.js具体如下：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex)
/*
 * 我们之所以将getters，mutations，actions单独写在一个js文件中是提高可读性和维护性
 */
const state = {
count:0,
sayloveToWho:""
}
 export default new Vuex.Store({
state,
getters,
mutations,
actions
})

src/store/actions.js具体如下：

export default {
/*
* 注意：这里的函数第一个参数是固定的context 第二个参数为传入的参数
* actions 主要用于处理异步  它不做具体逻辑处理  而是转发给mutations对应的函数处理
*/
increment:(context,p)=>{
context.commit(p)
}

}

src/store/mutations.js具体如下：

export default {

//传统写法  函数名不是常量  在mutations中state不需要再引入 可以直接使用 {tx}为传进的对象参数 使用了es6解构

sayLove:(state,{tx})=>{
state.sayloveToWho = tx+"我爱你！"
},
increment:(state)=>{
state.count++;
}

}

src/store/getters.js  由于这次的案例比较简单  所以就偷懒没有对getters进行处理  

这个getters.js作用是对存放在仓库里的数据进行统一处理 然后返给各个组件  做法跟mutations定义的方法类似

第五步：

哈哈  经过以上四步其实大家就可以在各个组件中使用state里的数据了当然也可以修改

具体还是以某个组件代码贴出吧!

<template>
<div id="father">
<input type="text" v-model="content" @keyup="changeVal"/>
这是父组件从仓库获取的数据:{{datas}}
<button @click="increments">{{vals}}</button>
<Child/>
</div>
</template>


<script>
import Child from'./child'
//引入mapMutations，mapActions集合
import { mapMutations,mapActions } from'vuex'
export default{
name:"father",
data(){
return{
content:""
}
},
components:{
Child
},
mounted(){
this.sayLove({tx:"嘿"})
},
methods:{
/*
* 这里使用了es6中扩展预算符...  并使用了mapActions和mapMutations集合
* 使用它们的目的是少使用this.$store.mutations.commit()  this.$store.Actions.dispatch()
* ...mapMutations(['sayLove']) 里面的参数为数组  要引入几个就写几个  但必须与mutations定义的方法名相同！
* */
...mapMutations(['sayLove']),
...mapActions(['increment']),
increments(){
/*
* 有了以上步骤 就可以直接使用this.increment()
* 注意 这里的increment是异步的  就是说先触发了actions中的increment  然后由它再触发mutations定义的具体逻辑
* */
this.increment("increment")
},
changeVal(){
//同理 就可以直接使用this.sayLove()
this.sayLove({tx:this.content})
}
},
computed:{
datas(){
return this.$store.state.sayloveToWho
},
vals(){
return this.$store.state.count
}
}
}
</script>


<style scoped="scoped">

</style>

当然我们为了防止方法名重复  可以将函数名设置为const 静态常量

好了，看到这 估计大家应该会用vuex了吧  赶快实践一番吧