Vue——vuex的使用

Vuex

为何要用vuex

vue中兄弟组件之间很难进行值的传递，于是产生了vuex来解决这个问题。

vuex的用途

相当于全局变量，在vuex中存储的属性和方法，可以在整个项目里进行调用。

vuex安装

npm install vuex -S

vuex的使用

src下面新建了store目录，下面新建了index.js，index.js代码如下

import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//引入自定义的tab.js（我进行了一次封装，这里才是我的项目里真正存放公共属性的地方）
import tab from './tab'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    tab
  }
})

tab.js代码如下

export default {
	//公共属性区域
    state: {
        isCollapse: true,
        currentMenu: null,
        tabList: [
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 'home'
            },
        ]
    },
    //调用方法区域，每个方法都要带上state
    mutations: {
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse;
        },
        selectMenu(state,val){
            if (val.name === 'home'){
                state.currentMenu = null
            }else{
                state.currentMenu = val;
                let result = state.tabList.findIndex(item=>item.name === val.name);
                result === -1 ? state.tabList.push(val) : ''
            }
        },
        closeTag(state,val){
            let result = state.tabList.findIndex(item => item.name === val.name);
            state.tabList.splice(result,1);
        }
    }
}

vuex获取数据

第一种方式，最简单常用

//xxx是属性名
this.$store.state.xxx

第二种方式
引入vuex的mapState

import {mapState} from 'vuex'

再用es6的扩展运算符对isCollapse进行赋值

...mapState({
     isCollapse:(state)=>state.xxx
})

vuex触发事件

第一种使用方式

this.$store.commit('selectMenu', item);

第二种使用方式
引入mapMutations

import {mapMutations} from 'vuex'

把mapMutations里的方法解析出来，我们在vuex中定义了closeTag方法，现在重命名为close

...mapMutations({
      close:'closeTag'
}),

然后这个close就可以当做函数一样调用了

this.close(tag);