在正式写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了吧 赶快实践一番吧