Vue学习日记（四）——Vue状态管理vuex

前言

先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。

说实在话，我在阅读vuex文档的时候，也很难以去理解vuex，甚至觉得没有使用它我也可以。但是直到我在项目碰到下面这些问题：

  1. 当路由切换的时候，原本路由的数据太多，传递过去太麻烦。
  2. 有些数据是多个路由需要用到的，那我就需要从后台获取多次数据

当然，这些问题都可以解决，就是在实例化vue对象的时候，就将这些数据绑定在window对象上面。但是我们也不得不设想：

  1. 万一数据太多了，那么可阅读性是不是会下降
  2. 如果只是修改单独的数据，是不是所有的页面都可以更新

对于第一个问题，答案是肯定的，虽然说，我们现在也可以用模块化的思想去使可阅读性更加好，但是没有一个规范，对于刚入手项目的总是难以理解。

对于第二个问题，当你页面少的时候，是不会出现这样的问题的，但是如果页面多了，你就会发现，当你把window.$data里面的数据更新的时候，所有页面的计算属性都会失效，就是你无论怎么修改数据，页面都不会更新数据。

这时候，就需要用到我们的vuex了。

vuex介绍

那么vuex 到底是什么？

引用官网的说法就是Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

是不是还是有点难以理解，其实简单的说vuex就是把这个项目的所有数据都存储在一个地方，方便修改和获取数据。

例如，我们从下面这张图给大家先简单的分析一下

在这张图片里面我们很明显可以看到三个部分

  1. Vue Components 表示vue里面的组件
  2. Backend API 后台API
  3. vuex 组件里面的数据管理

我们可以生动形象的理解，如果说Vuex是一个仓库，那么么Vue Components就就是售货者，负责把仓库里面的东西展现出来，Backend API就相当于入货的人，负责将货物买进来（也就是后台返回数据给前端，保存在vuex里面）。而vuex就是仓库，这个仓库里面有货物state，有管理货物进出的Muations

引用vuex

在说state之前，我们可以先在我们vue项目引用vuex

npm install vuex

然后在我们的src目录下新建一个store的文件夹，在store文件夹里面新建一个index.js的文件

// ~/src/store/index.js
import Vue from ‘Vue‘
import Vuex from ‘Vuex‘

// 在这里声明实例一个Vue 去引用Vuex状态管理插件
// 这样就可以减少在main.js里面的代码量了
Vue.use(Vuex)

// 返回store实例对象
export default new Vuex.Store({
})

这里说一下吧，这里Store其实就是相当vuex实例化的一个仓库。

data替代者state

为什么说state是data的替代者呢？

很容易理解，就是讲组件里面的局部参数，改成了一个可以全局使用的参数state，例如，我们在me.vue组件引用的数据todo。

那么我们可以在store里面这样实例化它出来

// ~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

那么，我们在组件里面怎么使用这个数据呢？

// me.vue组件文件

// ...
<script type="text/ecmascript-6">
export default {
  data() {
    meTodo: [] // 然后在方法里面引用this.meTodo = this.$store.state.todo
  }
}
</script>
// ...

是不是很简单，但是我们不可能每次使用这个值都要获取一次吧，这些vue团队也都想好了，我们可以通过计算属性来获取state里面的数据。

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from ‘vuex‘

export default {
  computed: mapState([
  // 映射 this.todo 为 store.state.todo
  ‘todo‘
])
}
</script>
// ...

相当于

// ...
<script type="text/ecmascript-6">
export default {
  computed:
  todo () {
    return this.$store.state.todo
  }
])
}
</script>
// ...

计算属性Getter

有时候我们会需要对state的数据进行一些过滤操作，例如我们只要在todo里面大于10的数字，如果是用computed的话，我们就需要使用filter函数，为了更加简便，vuex也给我们提供了计算属性getter。

我们可以修改我们的~/src/store/index文件

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

然后在me.vue里面引用

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from ‘vuex‘

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      ‘todo‘
    ])
  }
}
</script>
// ...

这样就可以简单拿到大于10的todo数据了

修改state的Mutation

我们说了怎么获取数据，但是我们应该怎么修改数据呢，是不是直接赋值给数据就可以了呢？

答案当然不是，vuex规定了，我们只能用Mutation来进行修改数据，那么，我们怎么进行修改数据呢？
修改我们的~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

然后在我们的me.vue组件里面修改

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from ‘vuex‘
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapMutations } from ‘vuex‘

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      ‘todo‘
    ])
  },
  method: {
    ...mapMutations(
      [
        // 将 `this.revsiseTode()` 映射为 `this.$store.commit(‘revsiseTode‘)`
        // 如果想传递参数可以使用this.$store.commit(‘revsiseTode‘, oneTode)
        // 或者Action
        ‘revsiseTode‘
      ]
    )
  }
}

Action的使用

写了这么久，终于到了Action的出场了，其实不管怎么说，Action主要是为了与后台交互而使用的属性，这里，我就假设todo的数据在路由/me/gettodo里面能够获取，因此，修改~/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get(‘/me/gettodo‘, (res) => {
      context.commit(‘revsiseTode‘, res.body.todo)
    })
  }
})

然后就可以通过触发我们的actions来提交mutations去修改state的数据了，在me.vue修改

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from ‘vuex‘
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapActions } from ‘vuex‘

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      ‘todo‘
    ])
  },
  method: {
    ...mapActions(
      [
        ‘reviseTodo‘, // 将 `this.reviseTodo()` 映射为 `this.$store.dispatch(‘reviseTodo‘)
      ]
    )
  }
}
// ...

vuex目录结构

上面主要只是简单的讲了一下vuex的使用，也只是讲了一部分，不过相信看了这里之后再去官网就会有更深的理解。当然这些都是简单的使用，如果想把vuex运用到项目，必须把他们模块化更加好看，vuex官网也为我们提供了规范的项目目录结构，我这里就不多啰嗦几句了。

总结

vuex其实不难，我一开始也以为很难一直学不会，只要多使用就会觉得，其实也就只是别人都封装好了的方法，我们去使用这个简便的仓库就行了。

原文地址：https://www.cnblogs.com/jlfw/p/12036622.html

时间： 2024-08-26 05:39:10

Vue学习日记（四）——Vue状态管理vuex的相关文章

Vue状态管理vuex

转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new

cocos2dx 3.1从零学习（四）——内存管理(错误案例分析)

本篇内容文字比较较多,但是这些都是建立在前面三章写代码特别是传值的时候崩溃的基础上的.可能表达的跟正确的机制有出入,还请指正. 如果有不理解的可以联系我,大家可以讨论一下,共同学习. 首先明确一个事实,retain和release是一一对应的,跟new和delete一样. 1.引用计数retain release 这里请参考一下引用计数的书籍,肯定说的比我讲的详细. 简单一点理解就是,对new的指针加一个计数器,每引用一次这块内存,计数就加1.在析构的时候减1,如果等于0的时候就delete这个

Vue中状态管理——Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

vue.js的状态管理vuex中store的使用

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

结合项目学习vue2(路由vue-router，状态管理vuex)

前期: index.html <div id="app"> <h1>{{intro}}</h1> <router-view></router-view> </div> app.js var App = new Vue({ router,//router:router的缩写 //传一个路由属性给 Vue 实例,路由现在被定义为一个在 router 实例里的一个routes 选项数组 data: { intro: &q

Vue学习系列(四)——理解生命周期和钩子

前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究vue的生命周期. 万物皆有灵,世间万物都拥有灵魂,小到山河湖海,花草树木,蚂蚁到人类,以及所有的动植物,大到地球星空和宇宙,都拥有灵魂,可以说他们都是有生命的,只是他们的生命形态是我们人类所不能理解的存在.在生产中,生命周期通俗来讲,就是从自然中来回到自然中去的全过程,也就是从采集材料设

Vue学习~2：Vue实例

Vue 实例的创建 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 当创建一个 Vue 实例时,你可以传入一个选项对象,指定这个 Vue 实例所管理的元素. 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成 数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中. 当这些属性的值发生改变时,视图将会产生"响应",即匹配更新为新的值. // 我们的数据

SERVLETJSP学习（六）—— 状态管理-cookie

1. 状态管理-Cookie 1.1. 状态管理 1.1.1. 为什么需要状态管理 Web应用程序使用HTTP协议作为传输数据的标准协议,而HTTP协议是无状态协议,即一次请求对应一次响应,响应结束后连接即断开,同一个用户的不同请求对于服务器端来讲并不会认为这两个请求有什么关联性,并不会以此区分不同的客户端.但实际情况中还是需要服务器端能够区分不同的客户端以及记录与客户端相关的一些数据,所以状态管理能够做到不同客户端的身份识别. 1.1.2. 什么是状态管理 将客户端与服务器之间多次交互当做一个

vue学习笔记初识vue——使用HTML模板

在创建Vue实例时,如果声明了el配置项,那么你也可以省略template 选项.这时候,Vue.js将提取锚点元素的HTML内容,做为模板. 我们可以使用单一的el配置项来创建Vue实例: var vm = new Vue({el:'#app'}); 在Vue.js中,这种模板被称为HTML模板,而使用template配置项 书写的模板,被称为字符串模板. 工作原理 当Vue.js发现你提供的选项中没有template属性时,将提取el属性所 指定的DOM节点的outerHTML内容作为模板内