前言

先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用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其实不难,我一开始也以为很难一直学不会,只要多使用就会觉得,其实也就只是别人都封装好了的方法,我们去使用这个简便的仓库就行了。

最新文章

  1. gdb调试方法
  2. 计算2的N次方&amp;&amp;计算e
  3. 基于FSIOT_A 实验平台SAM3S4B cortex-M3的温湿度采集
  4. Mac上的软件使用介绍
  5. C#获取枚举描述代码
  6. OC 设计模式——单例模式
  7. CityEngine 2013部署安装
  8. Chapter 2 Open Book——3
  9. PAT (Advanced Level) 1103. Integer Factorization (30)
  10. C++命名空间【转】
  11. (知识点)JavaScript闭包
  12. 关于Selenium3+python3.6自动化测试中iframe切换
  13. LCD学习
  14. Dubbo 源码解析四 —— 负载均衡LoadBalance
  15. 获取Oracle过程中的OUT SYS_REFCURSOR值
  16. 并发之atomicInteger与CAS机制
  17. go搭建web服务
  18. Spring Boot学习--项目启动时执行特定方法
  19. b4和tncl_extract_UNCL_new
  20. 【链表】Linked List Cycle

热门文章

  1. python -- TypeError: &#39;module&#39; object is not callable
  2. Rsync快速入门实例(转)
  3. T100——接口代码记录,jsonArray和json
  4. http请求之of_ordering_json
  5. Jmeter之Dummy Sampler
  6. nop4.1学习ServiceCollectionExtensions(一)
  7. 转:GitHub团队项目合作流程
  8. js大神成长指路
  9. 始终让footer在底部
  10. 常用的Java工具类——十六种