资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue 项目实战 (vue全家桶之--- vuex)

vue 项目实战 (vue全家桶之--- vuex)

番茄西红柿 / 1717人阅读

摘要：官方文档对的解读是是一个专为应用程序开发的状态管理模式。而就是为了解决这样的问题，把组件的共享状态抽取出来，以一个全局单例模式管理。我们还可以传入参数传入一个对象可以修改中的状态，但是并不是说随随便便修改的比如说

老规矩先安装

</>复制代码 
  1. npm install vuex --save

在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解

首先

vuex 是什么？

vuex 是属于vue中的什么，它在项目中扮演着一个什么样的角色，起到什么作用，在项目中我是否要用到vuex。

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

如果你是在开发一个大型的应用程序，组件与组件之间，兄弟组件之间，或者说多层嵌套组件之间，你是无法传递数据的。子父组件之间，也只是说通过事件保持数据的一致性，也是很繁琐的，会变得很不好管理。而vuex就是为了解决这样的问题，把组件的共享状态抽取出来，以一个全局单例模式管理。组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为，而且代码将会变得更结构化且易维护。

新建一个最简单的store

store.js

</>复制代码 
  1. import Vue from vue
  2. import Vuex from vuex
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5.   state: {
  6.     count: 0,
  7.     me: {
  8.       name: huangenai,
  9.       age: 22,
  10.       sex: 女
  11.     },
      list: [{name: hea, age: 22}, {name: cpq, age: 23}] 
</>复制代码 
  1.   },
  2.   mutations: {
  3.     increment (state) {
  4.       state.count++
  5.     }
  6.   }
  7. })

main.js

</>复制代码 
  1. import store from ./store.js
  2. new Vue({
  3.   el: #app,
  4.   router,
  5.   store,//加这个
  6.   components: { App },
  7.   template: <App/>
  8. })

State

驱动应用的数据源,组件之间共享的状态。

上面代码中的 count 就是一个共享的数据，me 也是一个共享的数据对象。

在组件中获得state 中的count

</>复制代码 
  1. this.$store.state.count

newvue.vue

</>复制代码 
  1. <template>
  2.     <div>
  3.         new vue page
  4.         <p>{{count}}p>
  5.     div>
  6. template>
  7. <script>
  8. export default {
  9.   name: newvue,
  10.   data () {
  11.     return {
  12.     }
  13.   },
  14.   computed: {
  15.     count () {
  16.       return this.$store.state.count
  17.     }
  18.   }
  19. }
  20. script>
  21. <style scoped>
  22. style>

为什么要写在computed 里面呢，而不是写在data里面，因为当state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM,如果你不理解可以先去看看computed

当一个组件要引用到多个状态的时候 ，一个个写是不是很累。不用担心，我们有mapState 辅助函数帮助我们生成计算属性。

在组件中引用

</>复制代码 
  1. import { mapState } from vuex
</>复制代码 
  1. <template>
  2.     <div>
  3.         <p>{{count}}p>
  4.         <p>{{countPlusLocalState}}p>
  5.         <p>sex: {{sex}}p>
  6.         <p>age: {{myAge}}p>
  7.         <p>name: {{name}}p>
  8.     div>
  9. template>
  10. <script>
  11. import { mapState } from vuex
  12. export default {
  13.   name: newvue,
  14.   data () {
  15.     return {
  16.       localCount: 1
  17.     }
  18.   },
  19.   computed: {
  20.     ...mapState({
  21.       // 箭头函数可使代码更简练
  22.       sex: state => state.me.sex,
  23.       myAge: state => state.me.age,
  24.       name: state => state.me.name,
  25.       // 传字符串参数 age 等同于 `state => state.age`
  26.       count: count,
  27.       // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  28.       countPlusLocalState (state) {
  29.         return state.count + this.localCount
  30.       }
  31.     })
  32.   }
  33. }
  34. script>
  35. <style scoped>
  36. style>

假设computed 里面还有别的数据，因为mapstate返回来的是一个对象所以我们这样写可以将数据混入

</>复制代码 
  1. computed: {
  2.   localComputed () { /* ... */ },
  3.   // 使用对象展开运算符将此对象混入到外部对象中
  4.   ...mapState({
  5.     // ...
  6.   })
  7. }

Mutation

你说你想修改state的值，this.$store.state.count = 1 这样可不可以 no no no....  所以就有了Mutation。

切记Mutation 必须是同步函数！！！

想要修改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

在上面代码我们新建一个store里面下的 有一个increment，就可以实现修改state里面的count

</>复制代码 
  1. export default new Vuex.Store({
  2.   state: {
  3.     count: 0
  4.   },
  5.   mutations: {
  6.     increment (state) {
  7.       state.count ++
  8.     }
  9.   }
  10. })

那么如何调用increment呢？？

调用 this.$store.commit(type)  类型叫increment 的 mutation。

</>复制代码 
  1. this.$store.commit(increment)

我们还可以传入参数

</>复制代码 
  1. // ...
  2. mutations: {
  3.   increment (state, n) {
  4.     this.$state.count = n
  5.   }
  6. }
</>复制代码 

  1. store.commit(increment, 10)

传入一个对象

</>复制代码 
  1. mutations: {
  2.   increment (state, data) {
  3.     state.count += data.count
  4.   }
  5. }
</>复制代码 
  1. store.commit(increment, {
  2.   count: 10
  3. })

mutations可以修改store中的状态，但是并不是说随随便便修改的,比如说

GPU云服务器 云服务器 Vue_Vuex 云服务器搭建vue项目 腾讯云服务器部署vue项目 vue项目放到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1731.html

相关文章

  • JS中bind、call和apply的作用以及在TS装饰器中的用法

    摘要：目录，前言，，例子，直接调用，将指向另一个对象，传递参数，，例子，直接调用，将指向另一个对象，传递参数，合并数组，，例子，直接调用，将指向另一个对象，传递参数，中装饰器使用，总结，相同点，不同点，前言，前言和在函数式编程时候非常有用，本  目录 1，前言 1，call 1.1，例子 1.2，直接调用 1.3，将this指向另一个对象 1...

    happyfish 评论0 收藏0

  • 前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

    摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0

  • Vue学习日记（一）——Vue介绍

    摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架，只是和他旁边的生态环境组成了一个框架，下面，贴一个官方的渐进式框架介绍图吧，方便理解。 前言 本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-route...

    王晗 评论0 收藏0

  • Vue学习日记（一）——Vue介绍

    摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架，只是和他旁边的生态环境组成了一个框架，下面，贴一个官方的渐进式框架介绍图吧，方便理解。 前言 本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-route...

    MasonEast 评论0 收藏0

  • 酷狗音乐- Vue / React 全家桶的两种实现

    摘要：引言两个月前用全家桶实现过一次酷狗音乐，最近又用全家桶重构了下，最终成果和的实现基本一致，放个图手机预览戳版本版本。的行为结构表现分离，很明显，而的分离虽然不是很明显，但实际上也是有的。发送指令，最终会到里合并数据，与中的类似。 引言 两个月前用 Vue 全家桶实现过一次 酷狗音乐，最近又用 React 全家桶重构了下，最终成果和 Vue的实现基本一致，放个图： showImg(htt...

    hot_pot_Leo 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<