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来解决的两个小案例，若有出入，欢迎指正。