关于vue.js:一文教会你认识Vuex状态机

37次阅读

共计 7761 个字符，预计需要花费 20 分钟才能阅读完成。

摘要：简略来说，Vuex 就是实现组件全局状态 (数据) 治理的一种机制，能够不便的实现组件之间数据的共享。

本文分享自华为云社区《Vuex 状态机疾速理解与利用》，原文作者：北极光之夜。

一. 速识概念：

1. 组件之间共享数据的形式：

通常有以下几种形式：

  1. 父向子传值：v-bind 属性绑定；
  2. 子向父传值：v-on 事件绑定；
  3. 兄弟组件之间共享数据：EventBus；

2. vuex 是什么：

  1. 依照官网的话来说，Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。Vuex 也集成到 Vue 的官网调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试性能。
  2. 简略来说，Vuex 就是实现组件全局状态 (数据) 治理的一种机制，能够不便的实现组件之间数据的共享。

3. 应用 vuex 长处：

  1. 可能在 vuex 中集中管理共享的数据，易于开发和前期保护。
  2. 可能高效地实现组件之间的数据共享, 进步开发效率。
  3. 存储在 vuex 中的数据都是响应式的，可能实时保持数据与页面的同步。
  4. 解决了非父子组件的消息传递（将数据寄存在 state 中）。
  5. 缩小了 AJAX 申请次数，有些情景能够间接从内存中的 state 获取。

个别状况下，只有组件之间共享的数据，才有必要存储到 vuex 中。而对于组件中的公有数据，就没必要了，仍旧存储在组件本身的 data 中即可。当然，如果你想要都存在 vuex 中也是能够的。

二. 根本应用：

1. 装置依赖包：

npm install vuex --save

2. 导入依赖包：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3. 创立 store 对象：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
//state 中寄存的就是全局共享的数据
  state: {count: 0}
})

4. 将 store 对象挂载到 vue 实例中：

new Vue({
  el: '#app',
  store
})

此时所有组件就能够从 store 中获取数据了。

三. 创立我的项目：

上面为创立一个 vue 我的项目 流程，前面会有案例：

（1）关上 cmd 窗口输出 vue ui 关上 vue 的可视化面板：

（2）抉择新建我的项目门路：

（3）命名：

（4）手动抉择配置，留神用的是 vue2 版本：

（5）创立：

（6）下一步：

（7）创立胜利，到对应目录关上 vscode 开始编程：

（8）运行我的项目：

四. 解说前提：

前提（留神）：

写一个计数器小案例，从 案例中配合概念 能更快上手 vuex。所以上面外围概念中的代码局部是基于这个小案例来演示的。指标：写两个子组件，有一个公共 count 值，在父组件中，其中一个组件实现点击后 count 值减 1，一个组件实现点击后 count 值增 1。

父组件 App.vue 初始代码：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
  </div>
</template>

<script>
// 引入组件
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
export default {
  name: 'App',
  data() {return {}
  },
  components: {
    'my-add': Add,
    'my-reduce': Reduce
  }

}
</script>

子组件 Add.vue 初始代码：

<template>
    <div>
        <p>count 值为：</p>
           <button>+1</button>
    </div>
 
</template>
<script>
  export default{data() {return {}
      },
  }
</script>

子组件 Reduce.vue 初始代码：

<template>
    <div>
         <p>count 值为：</p>
           <button>-1</button>
    </div>
</template>
<script>
  export default{data() {return {}
      },
  }
</script>

store 对象初始代码为：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {count: 0}
})

初始成果：

五. 外围概念：

1.state：

依照官网的话来说，如下：Vuex 应用繁多状态树——是的，用一个对象就蕴含了全副的利用层级状态。至此它便作为一个“惟一数据源 (SSOT)”而存在。这也意味着，每个利用将仅仅蕴含一个 store 实例。

简略来说，就是 State 提供惟一的公共数据源，所有共享的数据都要对立放到 Store 的 State 中进行存储。

1.1 组件中拜访 state 的第一种形式：

组件中间接输出以下命令：

如在 Add.vue 子组件中援用：

<template>
    <div>
        <p>count 值为：{{this.$store.state.count}}</p>
           <button>+1</button>
    </div> 
</template>
// 上面局部代码跟后面一样无扭转，所以省略了

看成果，显示了 count 的值为 0：

1.2 组件中拜访 state 的第二种形式：

（1）从 vuex 中按需导入 mapState 函数

import {mapState} from 'vuex'
（2）通过方才导入的 mapState 函数, 将以后组件须要的全局数据，映射为以后组件的 computed 计算属性:

computed: {...mapState([count])
}

小常识：computed 用来监控本人定义的变量，该变量不在 data 外面申明，间接在 computed 外面定义，而后就能够在页面上进行双向数据绑定展现出后果或者用作其余解决；

如在 Reduce.vue 子组件中援用：

<template>
    <div>
         <p>count 值为：{{count}}</p>
           <button>-1</button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
  export default{data() {return {}
      },
      computed: {...mapState(['count'])
      }
  }
</script>

看成果，同样显示了 count 的值为 0：

2. mutation：

依照官网的话来说，更改 Vuex 的 store 中的状态的惟一办法是提交 mutation。Vuex 中的 mutation 十分相似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是咱们理论进行状态更改的中央，并且它会承受 state 作为第一个参数。

简略来说就是 Mutation 用于变更 Store 中的数据。
①只能通过 mutation 变更 Store 数据, 不能够间接操作 Store 中的数据。
②通过这种形式尽管操作起来略微繁琐一些，然而能够集中监控所有数据的变动。

比方，要实现 count 值自减少 1 的操作，那就在先 motations 里定义一个自减少 1 的函数。而后对应子组件想用，该组件就间接引入 mutation 并调用对应的函数就好。

如下，Add.vue 子组件要实现自减少 1 性能：先在状态机里的 mutations 里定义一个能实现自增的函数 add：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    // 自减少 1 函数
    add(state){state.count++}
  }
})

2.1 触发 mutation 的第一种形式：

Add.vue 子组件里给按钮绑定点击事件，并触发 mutation：

<template>
    <div>
        <p>count 值为：{{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{data() {return {}
      },
      methods: {btnAdd() {
              // 第一种引入 mutation 的形式，触发 add 函数
              this.$store.commit('add')
          }
      }
  }
</script>

看成果实现了点击自增：

2.2 触发 mutation 并传参数：

当然，当组件里调用 mutation 里函数时，也是能够传参数的。比方，有一个自增函数，但增多少看调用时传入的参数：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    // 传入参数，第一个肯定是 state，第二个为传入的参数
    // 自减少 n 的函数
    addN(state,n){state.count+= n}
  }
})

对应组件调用时要传入参数：

methods: {btnAdd2() {
              // 引入 mutation 的形式，触发 addN 函数
              // 并传参，自减少 6 吧
              this.$store.commit('addN',6)
          }
      }

2.3 触发 mutation 的第二种形式：

（1）从 vuex 中按需导入 mapMutations 函数

import {mapMutations} from 'vuex'
（2）通过方才导入的 mapMutations 函数，将须要的 mutations 函数，映射为以后组件的 methods 办法:


methods: {...mapMutations(['add','addN'])
}

实战，实现 Reduce.vue 组件的点击自减 1 的性能要求：

状态机增加自减函数：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    // 自减少 1 函数
    add(state){state.count++},
    // 自减 1 的函数
    sub(state){state.count--}
  }
})

Reduce.vue 组件点击按钮实现自减 1：

<template>
    <div>
         <p>count 值为：{{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
// 导入
import {mapState,mapMutations} from 'vuex'
  export default{data() {return {}
      },
      computed: {...mapState(['count'])
      },
      methods: {
          // 映射 mutation 里的 sub 函数
          ...mapMutations(['sub']),
          // 要自减，调用 sub 函数
          btnSub(){this.sub()
          }
      }
  }
</script>

看成果：

3.Action：

至此，第四大点里的案例曾经实现，曾经实现了自增和自减，当初对案例做改良，要咱们点击按钮一秒后再自增和自减，该怎么实现？能够在状态机里的 mutation 里的函数是加一个 1 秒定时器吗，这必定是不行的，因为 mutation 里不反对异步操作，那咋办，当当当，Action 闪亮退场。

Action 能够蕴含任意异步操作，所以它用来解决异步工作。

Action 提交的是 mutation，而不是间接变更状态。记住它并不能间接批改 state 里的数据，只有 mutation 能批改。就是说，如果通过异步操作变更数据，必须通过 Action, 而不能应用 Mutation, 然而在 Action 中还是要通过触发 Mutation 的形式间接变更数据。

先在状态机里定义 Action：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    // 自减少 1 函数
    add(state){state.count++},
    // 自减 1 的函数
    sub(state){state.count--}
  },
  // 定义 action，外面的 addAsync 函数实现 1 秒后执行 mutation 里的 add 函数
   actions: {addAsync(context) {setTimeout(()=>{
      // 必须通过 context.commit（）触发 mutation 才行
         context.commit('add')
    },1000)
  }  
 }
})

Action 函数承受一个与 store 实例具备雷同办法和属性的 context 对象，因而你能够调用 context.commit 提交一个 mutation。

3.1 触发 Action 的第一种形式：

更改组件 Add.vue 代码，引入 Action，实现异步自增操作。

<template>
    <div>
        <p>count 值为：{{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{data() {return {}
      },
      methods: {btnAdd() {
              // 第一种引入 Action 的形式，触发 addAsync 函数
              // 这里的 dispatch 专门用来调用 action 函数
              this.$store.dispatch('addAsync')
          }
      }
  }
</script>

看成果，实现 1 秒后自增：

3.2 触发 Action 异步工作并传参数：

当然，当组件里调用 action 里函数时，也是能够传参数的。比方，有一个点击 1 秒后才执行的自增函数，但增多少看调用时传入的参数：

定义：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
   // 传入参数，第一个肯定是 state，第二个为传入的参数
    // 自减少 n 的函数
    addN(state,n){state.count+= n}
  },
   actions: {
    // 有参数 n，这个 n 又传给了 mutation 里的 addN 函数
    addNAsync(context,n) {setTimeout(()=>{context.commit('addN',n)
    },1000)
  }  
 }
})

对应组件调用时要传入参数：

methods: {btnAdd2() {
              // 调用 dispatch 函数
              // 触发 action 时传参数，为 6 吧，示意自增 6
              this.$store.dispatch('addNAsync',6)
          }
      }

3.3 触发 Action 的第二种形式：

（1）从 vuex 中按需导入 mapActions 函数

import {mapActions} from 'vuex'
（2）通过方才导入的 mapActions 函数，将须要的 actions 函数，映射为以后组件的 methods 办法:


methods: {...mapActions(['add','addN'])
}

实战，实现 Reduce.vue 组件的点击一秒后自减 1 的性能要求：

定义 actions 里的 subAsync 为一秒后自减函数：

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    // 自减少 1 函数
    add(state){state.count++},
    // 自减 1 的函数
    sub(state){state.count--}
  },
   actions: {addAsync(context) {setTimeout(()=>{context.commit('add')
    },1000)
  },
   subAsync(context) {setTimeout(()=>{context.commit('sub')
    },1000)
  }    
 }
})

更改 Reduce.vue 代码，实现性能：

<template>
    <div>
         <p>count 值为：{{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
// 导入
import {mapState,mapActions} from 'vuex'
  export default{data() {return {}
      },
      computed: {...mapState(['count'])
      },
      methods: {
          // 映射 Action 里的函数
          ...mapActions(['subAsync']),
          // 要自减，调用 subAsync 函数
          btnSub(){this.subAsync()
          }
      }
  }
</script>

看成果：

4. Getter：

Getter 用于对 Store 中的数据进行加工解决造成新的数据。且要留神的是它并不会批改 state 中的数据。
①Getter 能够对 Store 中已有的数据加工解决之后造成新的数据, 相似 Vue 的计算属性。
②Store 中数据发生变化，Getter 的数据也会跟着变动。

如，有一个返回以后 count+ 1 的 getter 函数：

4.1 触发 getters 的第一种形式：

this.$store.getters. 名称
在 App.vue 组件中显示：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{this.$store.getters.showNum}}</h3>
  </div>
</template>

成果：

4.2 触发 getters 的第二种形式：

（1）从 vuex 中按需导入 mapGetters 函数

import {mapGetters} from 'vuex'
（2）通过方才导入的 mapGetters 函数, 将以后组件须要的全局数据，映射为以后组件的 computed 计算属性:

computed: {...mapGetters(['showNum'])
}

还是在 App.vue 中应用把：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{showNum}}</h3>
  </div>
</template>

<script>
// 引入组件
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
// 导入 mapGetters 函数
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  data() {return {}
  },
  components: {
    'my-add': Add,
    'my-reduce': Reduce
  },
  // 引入 getter
  computed: {...mapGetters(['showNum'])
  }

}
</script>

看，一样的成果：

点击关注，第一工夫理解华为云陈腐技术~

正文完
vue.js
发表至： vue.js
2021-06-09
 0
关于vue.js:Vue父子组件的数据通信双向绑定
关于vue.js:基于声网互动白板实现一个多人数独游戏
关于vue.js:vueangular中的数据监听
关于vue.js:vue中vfor循环选中点击元素并添加样式