Vuex项目--模块化状态管理组件

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绑定在父元素身上的时候，称为事件委派