getter方法的作用 vuex_Vuex的工作流程

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

vuex有哪几种属性

有五种，分别是State、 Getter、Mutation 、Action、Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

a) 在vue组件里面，通过dispatch来触发actions提交修改数据的操作。

b) 然后再通过actions的commit来触发mutations来修改数据。

c) mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

d) 最后由store触发每一个调用它的组件的更新

Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。

Vue组件（action里面的dispatch）---》actions（方法commit）---》mutations（Mutate）---》state（getter）---》store更新所有调用vuex的组件（Vue Component组件）

mapState辅助函数

computed: mapState([// 映射 this.count 为 store.state.count'count'
])相当于
computed:{count(){ return this.$store.state.count }
}computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`// countAlias : state => state.count,countAlias: 'count',// 为了能够使用 `this` 获取局部状态，必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}
})

通过属性访问的：

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)},doneTodosCount: (state, getters) => {return getters.doneTodos.length}}
})//使用方法
computed: {doneTodosCount () {return this.$store.doneTodos  // [{ id: 1, text: '...', done: true }]}
}还有一种情况，自带getter参数的
//使用方法
computed: {doneTodosCount () {return this.$store.getters.doneTodosCount //2}
}

通过方法访问的：（注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果）

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}}
})//使用方法
computed: {doneTodosCount () {return this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }}
}

mapGetters函数

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}
//相当于
export default {// ...computed: {doneTodosCount:this.$store.getters.doneTodosCount,anotherGetter :this.$store.getters.anotherGetter }
}

mutation特点

每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}}
})// ...
mutations: {increment (state, n) {state.count += n}
}store.commit('increment', 10)

getter方法的作用 vuex_Vuex的工作流程相关推荐

getter方法的作用 vuex_Vuex入门篇——基本使用
开始前,请尝试理解下面这张图的关系,或许有助于你理解下面的有关Vuex的使用介绍. Vuex使用方法题题题1.安装如果你已经开始了一个项目,我们直接运行命令安装Vuex npm install ...
getter方法的作用 vuex_vuex Getter
我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数: computed:{ doneTodosCount(){ return this.$store.state.todos. ...
方法 | 机器学习(深度学习)通用工作流程
机器学习(深度学习)通用工作流程 Deep Learning with Python 4.5节 1. 定义问题并装载数据集(Defining the problem and assembling a ...
GPU 与CPU的作用协调，工作流程、GPU整合到CPU得好处
在不少人的心目中,显卡最大的用途可能就只有两点--玩游戏.看电影,除此之外,GPU并没有其他的作用了.但是随着微软IE9的正式发布,不少人突然发现,微软一直提到一个名词:GPU硬件加速,从而也让不少人 ...
SOTIF预期功能安全工作流程
预期功能安全系列文章 SOTIF预期功能安全理解及分析方法 SOTIF预期功能安全工作流程文章目录预期功能安全系列文章 SOTIF预期功能安全工作流程 SOTIF预期功能安全工作流程
Sitecore 8.2 工作流程
假设您的新Sitecore项目的所有开发都已完成.现在的下一步是在网站上填写内容并准备上线.客户通知您他们希望使用专门的网站管理员团队负责整个内容管理流程,并要求您为他们准备实例以便能够执行此操作. ...
一、scrapy爬虫框架——概念作用和工作流程 scrapy的入门使用
scrapy的概念和流程学习目标: 了解 scrapy的概念了解 scrapy框架的作用掌握 scrapy框架的运行流程掌握 scrapy中每个模块的作用 1. scrapy的概念 Scrap ...
4-2 能力提升与优势打造-工作流程梳理-从执行跃迁到流程的方法流程化、工具化、清单化
本次目标: (1)获得从基础琐碎的工作中锻炼能力.干出成绩的方法 (2)学习流程化.工具化.清单化这三个方法 (3)沉淀工作经验,迅速摆脱基层岗位的经验束缚 (4)具备管理岗位具备的能力,加速职业发展 ...
Scrapy框架的概念、作用和工作流程
1. scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架.它是一个被设计用于爬取网络数据.提取结构性数据的框架. Scrapy是一个为了爬取网站数据,提取结构性数 ...

getter方法的作用 vuex_Vuex的工作流程

getter方法的作用 vuex_Vuex的工作流程相关推荐

最新文章

热门文章