10：VueX

三思原创大约 18 分钟

VueX是专为Vue.js应用程序开发的状态管理模式，提供集中式存储管理应用的所有组件状态。它能够实现多个组件间共享状态，管理用户登录状态、商品信息等。通过state、view和actions实现单界面和多界面的状态管理，将共享状态交给Vuex的全局单例模式进行统一管理，并在组件中访问和修改状态。

Vue自学笔记10：VueX

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。
(帮大家节省自己整理笔记的时间啦,剩下的时间一定要去上机实操,多多练习!!)
ps：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibiliopen in new window（附上视频链接！)

九、Vuex

1. Vuex的定义

1.1 Vuex是做什么的?

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。
其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。
不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

1.2 管理什么状态呢?

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。
比如用户的登录状态(token)、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。

单界面的状态管理

State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

单界面状态管理的实现

在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。

counter需要某种方式被记录下来，也就是我们的State。
counter目前的值需要被显示在界面中，也就是我们的View部分。
界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

多界面状态管理 Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的

状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。
但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！
没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式（大管家）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。
这就是Vuex背后的基本思想。
Vuex状态管理图例

2. Vuex简单实用

2.1 简单的案例

我们还是实现一下之前简单的案例

首先，我们需要在某个地方存放我们的Vuex代码：

这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件
在index.js文件中写入如下代码：

挂载到Vue实例中

来到main.js文件，导入store对象，并且放在new Vue中
这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

使用Vuex的count

我们来对使用步骤，做一个简单的小节：

提取出一个公共的store对象，用于保存在多个组件中共享的状态
将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
在其他组件中使用store对象中保存的状态即可通过this.$store.state.属性的方式来访问状态通过this.$store.commit('mutation中方法')来修改状态

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count。这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

3.Vuex核心概念

Vuex有几个比较核心的概念:

State
Getters
Mutation
Action
Module

3.0 视屏中代码总结+分析

该部分是所有vuex内容汇总,建议从3.1开始一步步学的时候参照着看.

代码部分:

main.js文件:

 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
 
 Vue.config.productionTip = false
 // Vue.prototype.$store = store //挂载是内部其实会执行这行代码
 
 new Vue({
   el: '#app',
   router,
   store,
   render: h => h(App)
 })

App.vue文件:

 <template>
   <div id="app">
     <h2>---------App内容---------</h2>
     <h2>{{ $store.state.counter }}</h2>
     <button @click="add">+</button>
     <button @click="sub">-</button>
     <button @click="addCount(5)">+5</button>
     <button @click="addCount(10)">+10</button>
     <button @click="addStudent">添加学生</button>
     <h2>---------Home内容---------</h2>
     <home />
     <h2>---------Mutation响应规则---------</h2>
     <h2>{{ $store.state.info }}</h2>
     <button @click="addAddress">添加地址</button>
     <h2>---------getters中的方法的使用---------</h2>
     <h2>年龄大于30岁的学生有:{{ $store.getters.ageOlderThan30 }}</h2>
     <h2>年龄大于30岁的学生个数为:{{ $store.getters.numOfAgeOlderThan30 }}</h2>
     <h2>
       年龄大于x岁的学生个数为(x为20):{{ $store.getters.numOfAgeOlderThanx(20) }}
     </h2>
     <h2>---------actions的使用---------</h2>
     <h2>{{ $store.state.info }}</h2>
     <button @click="asyncAddWeight">异步添加体重</button>
     <h2>---------modules的使用---------</h2>
     <h2>{{$store.state.a.name}}</h2>  <!--不一样了:因为a模块会自动加到state中,所以state一定要在a前面 -->
     <button @click="updateName">更新name</button><!--模块的mutations的使用形式不变-->
     <h2>{{$store.getters.fullName1}}</h2><!--模块的getters的使用形式不变-->
     <h2>{{$store.getters.fullName2}}</h2><!--模块的getters的使用形式不变-->
     <h2>{{$store.getters.fullName3}}</h2><!--模块的getters的使用形式不变-->
     <button @click="asyncUpdateName">异步更新name</button>
   </div>
 </template>
 
 <script>
 import Home from "./components/Home.vue";
 export default {
   name: "App",
   components: { Home },
   methods: {
     //普通的提交风格
     add() {
       this.$store.commit("increment");
     },
     sub() {
       this.$store.commit("decrement");
     },
     //传递一个参数
     addCount(count) {
       //payload:负载
       this.$store.commit("incrementCount", count);
     },
     //传递多个参数时,通过传递对象实现
     addStudent() {
       let stu = { name: "jordan", age: 45 };
       this.$store.commit("addStudent", stu);
     },
 
     //特殊的提交风格 (以addCount举例)
     //优点:这种风格可以将传递一个参数和传递多个参数的提交风格统一了,也可以理解成传递多个参数更方便了
     // addCount(count){
     //   let x = 3
     //   this.$store.commit({type:'incrementCount',count,x})
     // }
     //------------------------------------------------------------------------------
     //Mutation响应规则
     addAddress() {
       this.$store.commit({ type: "addAddress" });
     },
     //Actions的使用
     //index.js中Actions中是普通写法时:
     // asyncAddWeight() {
     //   this.$store.dispatch("asyncAddWeight", {
     //     massage: 120,
     //     success: () => {     //回调函数
     //       console.log("异步添加体重成功");
     //     },
     //   }); //可以将message(待传数据)和success(异步操作成功的回调函数)封装在一个对象中
     // },
     //(推荐使用)index.js中Actions中是Promise写法时:
     asyncAddWeight() {
       this.$store    //因为dispatch调用了asyncAddWeight函数,返回的是一个Promise对象,所以后面跟.then函数没毛病
         .dispatch({ type: "asyncAddWeight", weight: 120 }) 
         .then((res) => {    //回调函数
           console.log("异步添加体重成功");
           console.log(res);
         });
     },
     //modules的mutations的使用
     updateName(){   
       this.$store.commit({type:"updateName"})
       //如果store中根store的mutations中和其模块的mutations中都有叫updateName的方法,则都会执行
     },
     asyncUpdateName(){
       this.$store.dispatch("asyncUpdateName")
     }
   }
 };
 </script>
 
 <style>
 </style>

index.js文件:

 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
 const moduleA = {
     state:{
         name:'我是moduleA中的state的name'
     },
     mutations:{
         updateName(state){
             state.name = '我是moduleA中mutations中updateName修改后的name'
         }
     },
     getters:{
         fullName1(state){
             return '我是moduleA中getters中的fullName1'
         },
         fullName2(state,getters){
             return getters.fullName1+'+2'
         },
         fullName3(state,getters,rootState){ //rootState是"根"store中的state对象!!
             //括号里getters参数不能少写!!!
             console.log(rootState);
             return "模块中可以用rootState获取根store中的state对象,如拿rootState的counter值:"+rootState.counter
         }
     },
     actions:{
         asyncUpdateName(context){
             // console.log(context);
             //打印context会发现:其有commit,dispatch方法,和getters,rootGetters,rootState,state对象
             setTimeout(()=>{
                 context.commit('updateName')
             },1000)
         }
     }
 }
 
 const store = new Vuex.Store({
     state: {
         counter: 1000,
         student: [{ name: 'curry', age: 34 }, { name: 'james', age: 38 }, { name: 'pull', age: 23 }],
         info: {
             name: 'double_up',
             age: 20,
             height: 180
         }
     },
     mutations: {
         //普通的提交风格
         increment(state) {
             state.counter++
         },
         decrement(state) {
             state.counter--
         },
         incrementCount(state, count) {
             state.counter += count;
         },
         addStudent(state, stu) {
             state.student.push(stu)
         },
 
         //特殊的提交风格,方法如下写:其实就是将提交的参数封装到到对象中了,将这个参数命名为payload
         // incrementCount(state, payload) {
         //     state.counter += payload.count+payload.x
         // }
         //--------------------------------------------------
         addAddress(state) {
             // state.info["address"]='china' //该方法在vue3中好像是可以响应式的,但vue2中不行,以后试试
             // state.info中响应式添加
             Vue.set(state.info, 'address', 'china')
 
             // state.info中响应式删除则可以使用delete
             // Vue.delete(state.info,'height')
         },
         addWeight(state, weight) {  //这个就是asyncAddWeight中context去commit调用的函数
             Vue.set(state.info, 'weight', weight)
         }
     },
     getters: {
         //返回学生年龄大于30岁的学生
         ageOlderThan30(state) {
             return state.student.filter(s => s.age > 30)
         },
         //获取年龄大于30岁的学生的个数
         //还可以传getters做参数,调用getters里的方法
         numOfAgeOlderThan30(state, getters) {
             //上面的state参数还是要保留的,因为在下方调用ageOlderThan30函数时,还是隐式需要state的
             return getters.ageOlderThan30.length
         },
         //如果需要返回年龄大于x的学生(x为调用时传进来的参数)
         numOfAgeOlderThanx(state) {
             return x => {
                 return state.student.filter(s => s.age > x)
             }
         }
     },
     actions: {
         //actions中的context相当于store对象
         // 普通写法:进行异步处理(网络处理+回调函数)
         // asyncAddWeight(context,payload){
         //     setTimeout(()=>{
         //         context.commit('addWeight',payload.message)
         //         // console.log(payload)
         //         payload.success() //网络处理成功,进行success回调
         //     },1000)
         // }
 
         //(推荐使用)Promise对象写法
         asyncAddWeight(context, payload) {
             console.log(context);
             //打印context会发现:其有commit,dispatch方法,和getters,rootGetters,rootState,state对象
             return new Promise((resolve,reject)=>{
                 setTimeout(() => {
                     context.commit('addWeight', payload.weight)  //在这里commit哦
                     resolve('浅给.then()传个res参数吧')//网络处理成功后,进行.then()的调用
                 }, 1000)
             })
         }
     },
     modules: {
         a : moduleA//moduleA对象定义在store上方了
     }
 })
 
 export default store