1.安装vuex: cnpm install --save vuex
2.为home search ...分别创建对应的状态管理文件
新建store文件夹,文件夹里创建home,search等四个文件夹以及index.js(用于汇总四个状态管理组件),每个文件夹里创建相应的index.js用于汇总四个。
3.
状态管理组件的书写方式:
const state={}
const mutations={}
const actions={}
const getters={}
export default{
state,
actions,
mutations,
getters
}
汇总组件的书写方式:
import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)
import home from './home'
import search from './search'
export default new Vuex.Store({
modules:{
home,
search
}
});
4.使用状态数据
1)在main.js入口文件中引入store,并注册状态组件
import store from '@/store'
new Vue({
render: h => h(App),
router,
store,//注册状态组件,组件实例身上多了一个属性:$store
}).$mount('#app')
2) 在使用store的组件中,将store中的所有状态数据取出(因为已经汇总到一起了,所以取出也是一起取出)
import { mapState } from "vuex";
3)在计算属性里写:
computed: {
...mapState({
//右侧需要一个函数,当需要使用这个计算属性的时候,右侧的函数会立即执行一次
//诸如一个参数state,此参数是大仓库中的所有数据
categoryList: (state) => {
return state.home.categoryList.slice(0, 16);//只用了home状态下的categoryList数据的前16条
},
}),
},
4)在组件里使用categoryList数据
5.事件委派
-
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
-
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave(采用这个)
当把 mouseleave绑定在父元素身上的时候,称为事件委派