vuex简单理解
vuex是什么
官方的说法是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单理解就是Vuex 是前端为了方便数据的操作而建立的一个" 前端数据库",模块间是不共享作用域的,那么B 模块想要拿到 A 模块的数据,我们会怎么做? 通常做法就是会定义一个全局变量,叫aaa吧,就是window.aaa。然后把A 模块要共享的数据作为属性挂到 B 模块上。这样我们在 B 模块中通过window.aaa 就可以拿到这个数据了。
很多刚学习vue的人对于全局变量管理工具vuex都觉得很神秘难上手,今天就用很通俗的大白话协助大家理解一下vuex,作者的vue项目使用vue脚手架搭建的,用脚手架搭建的项目会在src文件夹下有一个store文件,打开store文件,会看到里边有index.js,getters.js,actions.js这几个js文件(如果没有的话就自己建一下)。那么vuex的核心就在这几个文件当中,其实vuex最核心的就四部分:state(全局变量),mutations(修改全局变量的方法),actions(用于提交mutations的方法),getters(其他vue组件读取state变量的中间变量,作者理解,该处相当于导出了state)。接下来开始上代码进行分析。
store.js文件中代码
该部分代码定义了全局变量state,并在mutations中定义了修改state的方法
import Vue from 'vue' // 导入vue
import Vuex from 'vuex' // 导入vuex
import * as actions from './actions' // 将actions方法导入
import * as getters from './getters' // 将getters导入
Vue.use(Vuex)
// 变量初始化
const state = {
count: 10
}
// 定义 mutations(即对变量state进行的操作)
const mutations = {
INCREMENT(state, canshu) {
state.count++
},
DECREMENT(state) {
state.count--
}
}
// 创建 store 实例(先不着急看该部分代码,该部分就是将全局变量,mutations,actions,getters整体变成一体化的实例)
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
actions.js中的代码
之所以用actions去提交mutations,应该是为了是的mutations中的方法可以异步操作(mutations中方法为同步执行,该处可能会迷惑,但是其实就是用actions中的方法去调用mutations中的方法而已)。
// 用于提交mutations中的INCREMENT方法(可根据自己的需要进行传参,对应的mutaitons中要接收参数)
export const increment = ({commit}) => {
commit('INCREMENT', canshu)
}
// 用于提交mutations中的DECREMENT方法
export const decrement = ({commit}) => {
commit('DECREMENT')
}
getters.js中的代码
一般getters中的代码比较简单,主要就将全局变量简单封装并导出,方便其他组件的调用。
// 该处将全局变量state下的count导出,是的其他vue组件都可以获取,进行修改
export const getCount = state => {
return state.count
}
要在main.js中引入vuex,并使用,使得整个项目使用vuex进行全局变量管理
在main.js中引入vuex(该部分引入在store.js添加也可)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
引用了vuex,接下来在组件中引入
假如我们要在一个名为demo.vue的组件中,对全局变量state.count进行修改
<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters(['getCount'])
},
methods: {
...mapActions([
'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
'decrement'
]),
test: function() {
this.increment(1) // 该处即可向调用当前页面的其他方法一样进行调用actions中的方法
console.log(this.getCount) // 同理,也可以像调用本地data值的方式调用全局变量
}
}
}
</script>
现在,我们再来看看 vuex 的数据流。vue通过actions处理数据,然后通过mutations 把处理后的数据放入state中,谁要用就通过getters从state中取。
如果有疑问,请留言
相关文章
- 使用深度学习模型近似简单的大气环流模式
- 简单java代码生成器的开发教程(一),根据数据库表逆向工程生成实体类(附源码)
- 非常易于理解的超简单图广度优先遍历、深度优先遍历算法python实现
- 自然常数e的由来(简单通俗易于理解自然常数e)
- java lamba表达式_非负简单函数表达式如何理解
- Git (简单基本操作)
- Time2Vec 的理解与简单实现
- android 系统浏览器 源码-Android 最最最简单的浏览器代码
- 使用PyTorch实现简单的AlphaZero的算法(2):理解和实现蒙特卡洛树搜索
- 简单理解JS中的this关键字 - wuuconix's blog
- CSS学习笔记09 简单理解BFC详解编程语言
- Redis哈希:简单快速存储数据 (redis哈希)
- Linux下压缩文件夹的简单操作(linux下的压缩文件夹)
- Oracle查询序列的简单方法(oracle查序列)
- Linux文件编码转换:一个简单的操作(linux文件编码更改)
- MySQL Join优化:简单有效的提升数据连接性能(mysqljoin优化)
- 简单易懂!Linux NDK安装指南详解(linuxndk安装)
- 在mssql2000下实现分区的简单操作(分区 mssql2000)
- 深入理解MSSQL锁:一个简单的例子(mssql锁例子)
- Linux 下简单步骤安装MySQL(linux 装mysql)
- Redis一种简单易懂的快速缓存数据库(怎么通俗理解redis)
- 北京金融局局长霍学文九问区块链:把区块链简单理解为“去中心化”并不准确