• 猿创征文｜【Vue五分钟】 Vuex状态管理总结

    目录

    前言

    一、什么是Vuex

    二、安装Vuex

    1、下载Vuex.js

    2、引入vuex.js

    3、Vuex的用法

    三、Vuex配置选项 

    1、state配置选项

    2、getters配置选项 

     3、mutations配置选项

    4、actions配置选项 

    5、modules配置选项

    前言

         这是一个系列的学习，可能很多C站的其他优秀的博主也记录够相关的博文，声明，该博文是博主本人自己再学习vue的路上的一个学习过程的见证，如有雷同，纯为巧合哦！后面还有很多的学习知识很多前辈大佬已经给我们教授，我们只能说是在前人的肩膀上学习总结，C站还有很多的博主记录本内容，不喜勿喷，知识看谁记录的详细而已。好了，开始我们今天的学习遨游之旅！！

    一、什么是Vuex

      这个Vuex是一个专门为了vue项目开发而开发的状态管理的模式。因为我们的vue组件之间都会存在自己的状态，并且每一个数据之间都需要共享需要的数据。我们可以简单的理解为Vuex的应用急速一个容器，它用来定义应用当中的数据以及数据处理工具，核心就是store，当组件应用了store中的状态的时候，如果状态发生了变化，那么相应的组件也会发生变化，组件的数据也会发生数据的更新。

    这个状态自管理应用包含以下几个部分：

    • 状态，驱动应用的数据源；
    • 视图，以声明方式将状态映射到视图；
    • 操作，响应在视图上的用户输入导致的状态变化。

     

    二、安装Vuex

    1、下载Vuex.js

        我们可以登录官方网站进行下载，在这里我们提供一个官网的链接，大家可以自行去下载即可。

    链接：安装 | VuexVue.js 的中心化状态管理方案https://vuex.vuejs.org/zh/installation.html

     官网这边提供了下载的教学方式，大家可以很简单的去看一下也可以，条条大路通罗马，方法有很多，不至于拘泥于小编的博客。

    2、引入vuex.js

    我们直接在我们的界面上先引入我们的vue.js ，然后再引入vuex.js.这个步骤简单，代码如下：大家直接复制也可以。

    2. <script src="/path/to/vuex.js">script>

    3、Vuex的用法

       首先要使用Vuex，那么我们先要通过new这个关键字实例化一个我们的项目实例，这个实例是单个的状态树。我们创建store的代码语法如下所示：

    1. new Vuex.store({
    2. state:{},   //竹竿天，组件中需要我们共享的数据
    3. mutations:{},//改变状态的唯一办就是提交mutations，同步我们改变的状态
    4. actions：{}  //用于同步更新状态
    5. }）

    接着，我们要将我们的store这个实例注入到Vue根实例当中；

    1. var vm = new Vue({
    2. el:'#app',
    3. store,
    4. })

    在最后通过我们的根实例中注册的store选项，这个store实例就会注入到我们的根组件下面的所有的子组件当中，这样子组件就会通过this.$store进行对store数据的访问。我们可以通过一段实例代码可以了解一下我们这个部分的理解。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  
    5.     <title>Vuex的使用title>
    6.     
    7.  
    8. head>
    9. <body>
    10.     <div id="app">
    11.         <p>姓名：{{name}}p>
    12.         <p>性别：{{gender}}p>
    13.         <p>年龄：{{age}}p>
    14.     div>
    15. body>
    16.  
    17. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    18. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    19. <script>
    20.     var store = new Vuex.Store({
    21.         state:{
    22.             name:'丘比特',
    23.             gender:'男',
    24.             age:22
    25.         },
    26.     })
    27.     var vm = new Vue({
    28.         el:'#app',
    29.         store,
    30.         computed:{
    31.             name(state){return this.$store.state.name},
    32.             gender(state){return this.$store.state.gender},
    33.             age(state){return this.$store.state.age},
    34.         }
    35.     })
    36. script>
    37. html>

    运行结果：

    我们可以看到我们的实例已经可以显示我们state里面的数据了。

    三、Vuex配置选项 

       我们前面记录学习的vue的部分，也有相关vue的配置选项的学习，所以Vuex也有他相应部分的配置选项，大家如果需要看vue的配置选项，有兴趣的可以到博主的主页搜索就可以了。

     在创建store实例的时候，我们需要传入一个配置的对象，我们往下一个个说明。

    1、state配置选项

        在这里稍微的补充一下知识点，Vuex的状态存储都是立马响应的，当我们的vue组件从store读取数据的时候，如果数据变化，页面上面的store数据也会跟着发生变化。

    我们上一个的实例代码我们可以知道通过“this.$store.state.name”这个访问到state里面的name这个数据，当一个组件需要获取多个组件的时候，将这一些状态全部进行声明成为计算属性computed有点繁琐，由于为了解决繁琐的初衷，我们的Vuex就提供了一个mapState辅助函数生成计算属性！

        使用这个辅助函数的时候，先要引入这个函数。这个辅助函数的参数有数组的写法和对象的写法一共两种写法。我们可以通过一段实例代码了解。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  
    5.     <title>Vuex的使用title>
    6.     
    7.  
    8. head>
    9. <body>
    10.     <div id="app">
    11.         <p>姓名：{{name}}p>
    12.         <p>博客：{{boke}}p>
    13.         <p>码龄：{{age}}p>
    14.         <p>*************************p>
    15.         <p>姓名：{{n1}}p>
    16.         <p>博客：{{n2}}p>
    17.         <p>码龄：{{n3}}p>
    18.     div>
    19. body>
    20.  
    21. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    22. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    23. <script>
    24.     var store = new Vuex.Store({
    25.         state:{
    26.             name:'丘比特',
    27.             boke:'丘比特惩罚陆',
    28.             age:1
    29.         },
    30.     })
    31.     var mapState = Vuex.mapState;
    32.     var vm = new Vue({
    33.         el:'#app',
    34.         store,
    35.         computed:{
    36.         ...mapState(["name","boke","age"]),//mapstate数组的写法
    37.         ...mapState({n1:"name",n2:"boke",n3:"age"})//mapstate对象的写法
    38.         }
    39.     })
    40. script>
    41. html>

    运行结果：

    2、getters配置选项 

       在上面一个的store中会在使用的时候，会派生矗一些数据需要我们处理。Vuex可以允许在store当中定义“getter”选项，getter会将我们的返回值根据它提供的依赖存起来，当依赖值发生变化的时候，getter也会重新计算，简单地说，那就是和computed计算属性一样。我们通过一段代码了解我们这一段属性选项。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Vuex的使用title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>电影：《隐入烟尘》票价h1>
    9.         <p>票价：{{total}}p>
    10.         <p>总票价：{{totalprice}}p>
    11.         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0812%252F3e335b62j00rggmlw001oc000hs00awg.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664263935&t=45b74bdee4889fa5660d0418f1043919" alt="">
    12.     div>
    13. body>
    14.  
    15. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    17. <script>
    18.     var store = new Vuex.Store({
    19.         state:{
    20.             price:'100',
    21.             num:'2',
    22.         },
    23.         getters:{
    24.             total(state){
    25.                 return state.price * state.num;
    26.             }
    27.         }
    28.     })
    29.     var mapGetters = Vuex.mapGetters;
    30.     var vm = new Vue({
    31.         el:'#app',
    32.         store,
    33.         computed:{
    34.         ...mapGetters(['total']),
    35.         ...mapGetters({totalprice:'total'})
    36.         }
    37.     })
    38. script>
    39. html>

    运行结果：

     

     3、mutations配置选项

       在每一个mutation当中都有一个字符串的事件类型和一个回调函数。因为我们要进行修改store的数据的话，那么我们就要提交mutation，而且还是同步函数，这样才能跟踪每一个状态的变化情况。在我们的组件当中有两种提交mutation的方法。我们都可以通过下面的代码来了解一下这个mutation的配置选项的内容。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Vuex的使用title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>{{num}}h1>
    9. <button @click="reduce">减5button>
    10. <button @click="add({n:10})">加5button>
    11.     div>
    12. body>
    13.  
    14. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    15. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    16. <script>
    17.     var store = new Vuex.Store({
    18.         state:{
    19.             num:100,
    20.         },
    21.         mutations:{
    22.             decrement(state){
    23.                 state.num--
    24.             },
    25.             increment(state,payload){
    26.                 state.num+=payload.n
    27.             },
    28.         },
    29.     })
    30.     var mapState = Vuex.mapState;
    31.     var vm = new Vue({
    32.         el:'#app',
    33.         store,
    34.         computed:{
    35.         ...mapState(["num"])
    36.         },
    37.         methods:{
    38.             reduce(){
    39.                 //这里是通过mutation修改store的状态的意思
    40.                 this.$store.commit("decrement");
    41.             },
    42.             add(){
    43.                 this.$store.commit({type:"increment",n:10});
    44.             }
    45.         }
    46.     })
    47. script>
    48. html>

    运行结果：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Vuex的使用title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>我想象的中秋国庆放假天数：h1>
    9.         <h1>{{num}}h1>
    10. <button @click="reduce({n:5})">减5button>
    11. <button @click="add({n:10})">加10button>
    12.     div>
    13. body>
    14.  
    15. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    17. <script>
    18.     var store = new Vuex.Store({
    19.         state:{
    20.             num:100,
    21.         },
    22.         mutations:{
    23.             decrement(state,payload1){
    24.                 state.num-=payload1.n
    25.             },
    26.             increment(state,payload2){
    27.                 state.num+=payload2.n
    28.             },
    29.         },
    30.     })
    31.     var mapState = Vuex.mapState;
    32.     var vm = new Vue({
    33.         el:'#app',
    34.         store,
    35.         computed:{
    36.         ...mapState(["num"])
    37.         },
    38.         methods:{
    39.             reduce(){
    40.                 //这里是通过mutation修改store的状态的意思
    41.                 this.$store.commit({type:"decrement",n:5});
    42.             },
    43.             add(){
    44.                 this.$store.commit({type:"increment",n:10});
    45.             }
    46.         }
    47.     })
    48. script>
    49. html>

    运行结果：

    我们可以通过单击的方式看到我们数据的变化，当然还可以到我们后台的vue得1部分看到我们state状态数据的变化。

    4、actions配置选项 

       这个actions这个部分的配置选项，有一点类似于我们上一个的mutation配置选项，但是和上面的mutation不同的是，action这个提交的是mutation这个配置选项，更加的简单粗暴，不是直接更改我们的状态的变化。action可以包含很多歌异步操作，是可以异步的修改state里面的数据。异步修改state也是需要提交一个我们的mutation，才能达到修改的目的。

       这个action函数接受一个和store实例具有相同方法和属性的context对象，因此可以钓欧阳context.commit提交一个mutation来获取state或者getter的数据。我们根据代码来了解一下。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Vuex的使用title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>我想象的日增资金：h1>
    9.         <h1>{{num}}h1>
    10.  
    11. <button @click="add()">>+100button>
    12.     div>
    13. body>
    14.  
    15. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    17. <script>
    18.     var store = new Vuex.Store({
    19.         state:{
    20.             num:100,
    21.         },
    22.         mutations:{
    23.             increment(state,payload){
    24.                 state.num+=payload.n
    25.             },
    26.         },
    27.         actions:{
    28.             async ayscIncrement({commit},payload){
    29.                 setTimeout(()=>{
    30.                     commit('increment',payload)
    31.                 },1000)
    32.             }
    33.         }
    34.     })
    35.     var mapState = Vuex.mapState;
    36.     var vm = new Vue({
    37.         el:'#app',
    38.         store,
    39.         computed:{
    40.         ...mapState(["num"])
    41.         },
    42.         methods:{
    43.             add(){
    44.                 this.$store.dispatch({type:"ayscIncrement",n:100});
    45.             }
    46.         }
    47.     })
    48. script>
    49. html>

    运行结果：

     上面可以看到我们的演示得结果，当然我们还是可以使用辅助函数mapAtions来进行简化修改，这里大家自己琢磨就好了！

    5、modules配置选项

       我们使用单一的组件状态树的时候，可以应用的所有状态会几种到一个较大的对象当中，但是当这个应用特别复杂的时候，我们的store就显得很不饱满。所以为了解决这一个问题，我们的Vuex就将store分隔成很多都饿模块modules，这样使得每一个模块都有自己的state、mutation、action等等，这样显得更加的好看。我们可以通过实例代码了解一下这个是什么一回事。

    实例代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Vuex的使用title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>{{this.$store.state.store1.num}}h1>
    9.         <h1>{{this.$store.state.store2.num}}h1>
    10.     div>
    11. body>
    12.  
    13. <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    14. <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>
    15. <script>
    16.     const module1 = {
    17.         state:{
    18.             num:100
    19.         },
    20.         getters:{},
    21.         mutations:{},
    22.         actions:{}
    23.     }
    24.     const module2 = {
    25.         state:{
    26.             num:200
    27.         },
    28.         getters:{},
    29.         mutations:{},
    30.         actions:{}
    31.     }
    32.     var store = new Vuex.Store({
    33.         modules:{
    34.             store1:module1,
    35.             store2:module2,
    36.         }
    37.     })
    38.     var vm = new Vue({
    39.         el:'#app',
    40.         store,
    41.     })
    42. script>
    43. html>

    运行结果：

     

  • 相关阅读:
    net.sf.json对象转jsonobject
    Linux文件系统 struct file 结构体解析
    Jenkins-jenkins凭证管理与代码拉取
    Transformer模型 | 基于Spatial-Temporal Transformer的城市交通流预测
    Live800:服务不是销售的终点，而是营销的起点
    Vue计算属性computed，全选反选案例
    【逃离】UniAccess
    数据结构-深度优先搜索Java实现
    JMeter之脚本录制
    axios-前后端数据交互流程
  • 原文地址：https://blog.csdn.net/Lushengshi/article/details/126568845