Vuex——项目应用（1）

vuex

Vuex是vue.js专门为了管理组件与组件之间的关系而提供的一种状态管理模式

下面简单介绍一下vuex在项目中的应用场景

首先我们要做的是安装vuex到我们的项目中

yarn add vuex

然后在我们通过vue-cli脚手架生成的src文件夹中建立一个store（仓库）文件夹，里面便可以建立一个index.js文件，来做我们的vuex的一个配置文件了。

我们在index.js中首先引入vue和vuex，在使用过vuex后就可以进行一个vuex的实例化了

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
  
})
export default store

此时，我们vuex的一个实例文件的模板就写好了。

这时，就可以在总入口文件，main.js进行引入和使用了

import store from './store/index.js'
//并且在实例vue的时候进行引入，为了让我们的其他组件都可以拿到$store
new Vue({
  router,
  store,
  render:h=>h(app)
}).$mount("#app")

此时，我们可以在组件找一个合适的地方打印this.$store，如果存在，那么我们就可以在项目中应用我们的Vuex了

下面我举两个在项目中经常遇到的小案例

一、底部导航栏的消失与隐藏

在写项目的时候，我们经常会遇到有一些组件页面需要存在底部导航栏，有些组件页面却不需要，那我们如果要通过组件通信来解决的话，那我们麻烦可大了去了，这时候，我们就该想起vuex来了。

vuex，我们可以把它用做一个仓库，在里面存放一个isTabberShow的属性，通过改变isTabberShow的属性，来改变我们公用底部导航栏Tabber的v-if属性，就可以实现在需要的时候让它显示，不需要的时候，让它隐藏了。

可以在vuex实例的时候通过state属性来进行维护我们所需要的状态值

const store = new Vuex({
  state: {
    isTabberShow: true
  }
})

假设，我们不需要显示的组件页面是Search.vue

我们可以在Search中进行打印this，可以发现可以通过this.$store.state来拿到我们的isTabberShow。

那如果我们不需要在Search中让底部导航栏显示，那该如何修改这个值呢？

vuex还有一个mutations属性，可以通过它来封装一些可以改变state中的值

比如

mutations: {
  show (state) {
    state.isTabberShow = true
  },
    hide (state) {
      state.isTabberShow = false
    }
}

然后我们在Search页面中created钩子函数中通过this.$store.commit('hide')来将vuex的state属性中的isTabberShow改为false

这时，我们Search页面中就不会显示底部导航栏了，不过别的页面组件也不显示了，这显然不是我们的需求，那我们需要在销毁生命周期树的时候将底部导航栏在显示出来

通过beforeDistory钩子函数通过this.$store.commit('show')来将vuex的state属性中的isTabberShow改为true

这样，我们实现底部导航栏按需求显示与消失的需求就解决了。

总结：将值存入vuex(仓库)后，如果想修改值，可以通过在mutations定义修改值的方法，在组件中通过this.$store.commit(方法名)的方法来实现我们的需求

二、异步请求数据

在项目中经常会遇到的一个场景：我们在不同的组件需求请求同一组数据，如果都进行请求的话，无疑增加了一笔很大的性能消耗，那我们也可以将异步请求数据也放在vuex仓库中，这样，在我们请求过数据后，第二个页面组件也需要这个数据的话，就不需要发送请求，可以直接进行调用。

首先我们可以在state中定义一个dataList：[ ] 来存放我们即将请求到的数据，这样组件就可以通过this.$store.state来拿到

可以通过vuex实例中的actions属性来进行解决我们的这个需求。

actions: {
  getData (context) {
    //在这里我进行了封装了axios的操作，在之前的博客中有提到过
    instance.get('/gateway?cityId=310100&ticketFlag=1&k=7954844',{
      headers: {
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      //在这里我们就拿到需要的数据了，那么问题来了，怎么在这里修改state中的值呢
      //在这里也可以使用在mutations中定义一个修改state中dataList值的方法，然后通过我们的参数context.commit来调用就可以完成我们的需求了
      context.commit('setData',res.data)
    })
  }
}
mutations: {
  setData (state,data) {
    state.dataList = data
  } 
}

这时，当我们需要请求数据的时候，只需要通过 this.$store.state.dispatch('getData') 来进行请求数据了

此时我们如果第二个组件也需要请求，只需要加一个判断，如果里面有数据了，直接通过this.$store.state来进行获取，如果没有，再通过上面所描述的进行请求数据。

以上就是我们在项目中经常遇到的通过vuex来解决的两个小案例，若有出入，欢迎指正。