Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 总结一下上面官方给出的解释：
注意1： vuex 只能在vuejs项目使用 注意2：为 vuejs 项目提供统一的数据仓库（我们可以把vuejs项目中所有的模型数据都统一放置在 vuex，为了解决组件间通信的问题） 注意3：vuex 里面管理的数据是单向的数据流（在操作数据的时候，只能按照一个方向去操作，或者换句话说，我们不能直接的操作数据，需要遵循 vuex 规范才可以操作数据。 注意4：提供一个调试的工具，非常方便的查看vuex管理的数据。
1， vuex 只能在vuejs项目使用，所以我们用vue-cli这个脚手架快速构建一个vue项目
yarn add @vue/cli npx vue create myapp
2,下载vuex，并在项目的main.js文件中导入并使用
import Vuex from 'vuex' Vue.use(Vuex)3，（1）创建一个仓库（store）（2）提供state（3）提供修改数据的mutation
const store = new Vuex.Store({ state: { count: 0, }, mutations: { },（4）注册store
new Vue({ //store在这里注册，然后渲染到页面上 store, router, render: h => h(App) }).$mount('#app')4，同步修改数据 （1）在App.vue主组件中的template中,先写一个按钮组，并定义点击事件，加减操作span里面的数据，这里是定义页面触发行为，然后创建一个生命周期函数，然后将函数导出 （2）在生命周期函数里面的methods中提交（commit）加减函数到mutation中 （3）在store的mutation中，定义加减函数应该进行什么操作(修改state)，然后渲染页面 （4）将仓库里的state映射到组件的data里面（需要映射成计算属性才行）
<1> 在App.vue中引入mapState import { mapState} from ‘vuex’; <2>然后在computed里面映射 …mapState({countAias: ‘count’,movieData:‘movieData’}) <3>底层原理 countAias:function(){ return this.$store.state.count }
（5）把仓库里面的mutations映射到组件中的methods
<1> 在App.vue中引入mapMutations import { mapState,mapMutations} from ‘vuex’; <2>然后在methods里面映射 …mapMutations([‘increment’,‘decrement’]), <3>底层原理 increment:function () { this.KaTeX parse error: Expected 'EOF', got '}' at position 31: …ncrement') }̲, decrement:fun…store.commit(‘decrement’) }
5,异步修改数据
（1）在App.vue中定义页面触发行为 （2）页面触发行为，dispatch（分发）在store中的action，在action中完成异步操作，去向服务器请求数据 （3）action请求完成以后，将响应回来的数据commit到mutation中 （4）然后将请求回来的数据保存下来，所以这里向action操作完了之后，要commit action 和payload （5）我们希望仓库帮我们管理数据，保存数据到仓库 （6）将在仓库里面的数据映射到data里 …mapState({countAias: ‘count’,movieData:‘movieData’}) （7）将action映射到methods里面
…mapActions({clickHandler:‘getMovie’}), 底层原理 clickHandler:function(){ this.$store.dispatch(‘getMovie’) },
(8)App.vue的template中渲染
（9）筛选（getters专门负责对数据的筛选过滤操作）
<1>在store 中定义一个getter,这里定义是一个方法，按照属性方式使用，和计算属性一样 <2>定义一个方法，筛选信息，将信息返回到页面中 <3>将getters映射到computed中 import {mapState, mapMutations, mapActions, mapGetters} from ‘vuex’; …mapGetters([‘returnStarBig12w’])
（10）vuex的缓存特性
<1>当第一次向服务器发送网络请求是，浏览器会对数据进行缓存，我们已经有了数据，但是在这里第二次第三次还是会向服务器请求数据，这样太耗费性能 <2> 我们可以在向服务器发送网络请求前，判断一下仓库里面有没有数据，如果没有，发送网络请求，如果有，则不发送
（11）loading效果
由于网络请求所耗费的时间是不确定，意味用户等待的时长也是不确定，为了防止乱点击，烦躁。一般在发送网络请求后，会在页面上出一个 loading的效果。数据成功回来后,loading消失。 1. loading.gif 2. 插件 3. css3 loading 效果 <1>我用css3loading效果，先在App.vue中放置html,和样式 <2>因为loading和数据是互斥的，所以我们分别给他们两个加上v-if=“flag”，v-else <3>我们让flag映射到data里面 …mapState({countAias: ‘count’,movieData:‘movieData’,flag:‘flag’}), <4>在action中，还没有网络请求的时候进行提交commit，payload默认为true，也就是loading是默认显示的 store.commit(‘modifyFlag’, true); <5>在mutation中关于modifyFlag进行操作 <6>在已经请求回来数据时（savemovieData），将flag改为false
（12）调试
store:
import Vue from "vue"; import Vuex from "vuex"; import axios from "axios"; Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, //异步修改数据第二步：因为我们希望仓库来帮我们管理接口数据，所以我在这里放一个电影列表的容器，待会我把数据请求回来了就放在这里，这一步做完了之后，我们让页面触发一个行为，dispatch movieData:[] }, //mutation接收到提交过来的行为和载荷，操作仓库里的数据state mutations: { //store里面有一个state数据，这是一个对象，对象里面含有count数据 //当点击加号的时候，count=count+payload increment (state) { state.count += 1 }, //store里面有一个state数据，这是一个对象，对象里面含有count数据 //当点击加号的时候，count=count+payload decrement (state) { state.count -= 1 }, //异步修改数据第五步：保存数据到仓库,state 是数据 saveMovie(state,payload){ state.movieData=payload state.flag=false }, modifyFlag:function(state,payload){ state.flag=payload } }, //异步修改数据第四步：action向服务器端请求数据，然后将请求回来的数据保存下来，所以这里向action操作完了之后，要commit action 和payload actions:{ getMovie:function(store, payload){ var url='https://movie.52kfw.cn/index.php/Api/Movie/alst?page=1&size=20' //当第一次向服务器发送网络请求是，浏览器会对数据进行缓存，我们已经有了数据，但是在这里第二次第三次还是会向服务器请求数据，这样太耗费性能 // 我们可以在向服务器发送网络请求前，判断一下仓库里面有没有数据，如果没有，发送网络请求，如果有，则不发送 if(store.state.movieData.length>0){ console.log('数据来自缓存！') return } //loading store.commit('modifyFlag', true); axios.get(url).then(response=>{ console.log(response) if(response.status=== 200 && response.data.error_code===0){ //这里的保存数据的操作是对数据库进行操作，只有mutation才可以操作数据库，所以saveMovie这个方法要写在mutation当中 store.commit('saveMovie',response.data.result) } }) } }, getters:{ returnStarBig12w:function(state){ console.log(state) return state.movieData.filter(item =>{ return item.star>=120000; }) } } }) export default store;App.use:
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <button @click="decrement">-</button> <span>{{ countAias }}</span> <button @click="increment">+</button> <button @click="clickHandler">获取电影列表</button> <div class="loading" v-if="flag"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <ul v-for="ele in movieData" v-else> <li>{{ ele.id }}</li> <li>{{ ele.actors}}</li> <li>{{ ele.title}}</li> </ul> <h2>收藏数大于12w</h2> <ul v-for="ele in returnStarBig12w"> <li>{{ ele.id }}</li> <li>{{ ele.actors}}</li> <li>{{ ele.title}}</li> </ul> <router-view/> </div> </template> <script> //可以将仓库里的state映射到组件的data里面（好处：不用写this.$store.state.count这么一大串了），但是需要映射成计算属性才行 //可以将仓库中的mutations（只能通过这个来修改仓库中的数据）映射到组件的method里面 import { mapState,mapMutations,mapActions,mapGetters} from 'vuex'; export default { //数据初始阶段就开始了 created:function() { console.log(this.$store); }, computed:{ //将仓库里的state里的count和movieData映射到组件的data里面 ...mapState({countAias: 'count',movieData:'movieData',flag:'flag'}), ...mapGetters(['returnStarBig12w']) //上面这句话的底层原理就是下面这个函数，相当于返回了仓库里的count，好处：1，简洁，2防止重名可以用对象的方式重命名 // countAias:function(){ // return this.$store.state.count // } }, methods:{ //把仓库里面的mutations映射到组件中的methods中 ...mapMutations(['increment','decrement']), //上面这句话的底层原理如下 //点击网页上的按钮，页面触发一个改变数据的行为，直接使用commit向mutation提交action和payload // increment:function () { // this.$store.commit('increment',10) // }, // decrement:function () { // this.$store.commit('decrement',10) // } ...mapActions({clickHandler:'getMovie'}), //异步修改数据第三步：页面触发一个请求数据的行为，页面dispatch这个行为(action),然后action向服务器端请求数据 // clickHandler:function(){ // this.$store.dispatch('getMovie') // }, } } </script> <style lang="less"> ul{ li{ list-style: none; } } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; height: 100%; border-radius: 4px; background: lightgreen; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 40px; background: lightgreen; } 50%{ height: 70px; margin: -15px 0; background: lightblue; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; } </style>