vuex的五个属性及使用方法_通俗易懂讲解Vuex

本文基本上是官方教程的翻版,用通俗易懂的文字讲解 Vuex,也对原文内容有删减。

如果你对以上声明不介意,那么就可以继续看本文,希望对你有所帮助。

学习一个新技术,必须要清楚两个W,"What && Why"。

"XX 是什么?","为什么要使用 XX ,或者说 XX 有什么好处",最后才是"XX 怎么使用"。

73753ea5987e845070520da3c5a6143f.png

Vuex是什么?

Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。

为什么使用Vuex?

当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。

遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理。这样不管你在何处改变状态,都会通知使用该状态的组件做出相应修改。

下面讲解如何使用Vuex。

最简单的Vuex示例

本文就不涉及如何安装Vuex,直接通过代码讲解。

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}}})

以上就是一个最简单的Vuex,每一个Vuex应用就是一个store,在store中包含组件中的共享状态state和改变状态的方法(暂且称作方法)mutations。

需要注意的是只能通过mutations改变store的state的状态,不能通过store.state.count = 5;直接更改(其实可以更改,不建议这么做,不通过mutations改变state,状态不会被同步)。

使用store.commit方法触发mutations改变state:

store.commit('increment');console.log(store.state.count) // 1

一个简简单单的Vuex应用就实现了。

在Vue组件使用Vuex

如果希望Vuex状态更新,相应的Vue组件也得到更新,最简单的方法就是在Vue的computed(计算属性)获取state

// Counter 组件const Counter = {template: `
{{ count }}
`,computed: {count () {return store.state.count;}}}

上面的例子是直接操作全局状态store.state.count,那么每个使用该Vuex的组件都要引入。为了解决这个,Vuex通过store选项,提供了一种机制将状态从根组件注入到每一个子组件中。

// 根组件import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const app = new Vue({el: '#app',store,components: {Counter},template: `

通过这种注入机制,就能在子组件Counter通过this.$store访问:

// Counter 组件const Counter = {template: `
{{ count }}
`,computed: {count () {return this.$store.state.count}}}

mapState函数

computed: {count () {return this.$store.state.count}}

这样通过count计算属性获取同名state.count属性,是不是显得太重复了,我们可以使用mapState函数简化这个过程。

import { mapState } from 'vuex';export default {computed: mapState ({count: state => state.count,countAlias: 'count', // 别名 `count` 等价于 state => state.count})}还有更简单的使用方法:computed: mapState([// 映射 this.count 为 store.state.count'count'])

Getters对象

如果我们需要对state对象进行做处理计算,如下:

computed: {doneTodosCount () {return this.$store.state.todos.filter(todo => todo.done).length}}

如果多个组件都要进行这样的处理,那么就要在多个组件中复制该函数。这样是很没有效率的事情,当这个处理过程更改了,还有在多个组件中进行同样的更改,这就更加不易于维护。

Vuex中getters对象,可以方便我们在store中做集中的处理。Getters接受state作为第一个参数:

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)}}})

在Vue中通过store.getters对象调用。

computed: {doneTodos () {return this.$store.getters.doneTodos}}

Getter也可以接受其他getters作为第二个参数:

getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)},doneTodosCount: (state, getters) => {return getters.doneTodos.length}}

mapGetters辅助函数

与mapState类似,都能达到简化代码的效果。mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性:

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

上面也可以写作:

computed: mapGetters(['doneTodosCount','anotherGetter',// ...])

所以在Vue的computed计算属性中会存在两种辅助函数:

import { mapState, mapGetters } from 'vuex';export default {// ...computed: {mapState({ ... }),mapGetter({ ... })}}

Mutations

之前也说过了,更改Vuex的store中的状态的唯一方法就是mutations。

每一个mutation都有一个事件类型type和一个回调函数handler。

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

调用mutation,需要通过store.commit方法调用mutation type:

store.commit('increment')

Payload 提交载荷

也可以向store.commit传入第二参数,也就是mutation的payload:

mutaion: {increment (state, n) {state.count += n;}}store.commit('increment', 10);

单单传入一个n,可能并不能满足我们的业务需要,这时候我们可以选择传入一个payload对象:

mutation: {increment (state, payload) {state.totalPrice += payload.price + payload.count;}}store.commit({type: 'increment',price: 10,count: 8})

mapMutations函数

不例外,mutations也有映射函数mapMutations,帮助我们简化代码,使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations(['increment' // 映射 this.increment() 为 this.$store.commit('increment')]),...mapMutations({add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')})}}

Mutations必须是同步函数。

如果我们需要异步操作,Mutations就不能满足我们需求了,这时候我们就需要Actions了。

Aciton

相信看完之前的Vuex的内容,你就已经入门了。那么Action就自己进行学习吧(Action有点复杂,我还需要时间消化)。

结语

学习一门新技术最重要的就是实践,单单看教程和demo是远远不够的。

前端路途漫漫,共勉。

<p style="font-size:16px;"> <span style="color:#333333;">vue框架整体介绍以通过归档方法下载vue.js文件和项目引入</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">学习vue基础知识:数据结构+各种指令学习+事件触发</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">计算属性讲解事件绑定,表单输入绑定以过滤器,自定义指令</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过案例来巩固前面知识:开发备忘录案例+商品列表案例</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">vue组件系统学习</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">在node.js环境中通过vue脚手架来搭建项目以学习webpack</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">讲解路由知识点:编程式,嵌套路由,动态路由,程序化导航等</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过商品列表案例来学习vue相关知识点</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">继续通过商品列表案例来学习vue相关知识点</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">静态资源导入:css文件,js文件,img图片</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">axios插件应用:实现前后端数据通信</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">学习vuex状态管理插件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">讲解vuex高级操作:以模块形式来封装vuex</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">在项目中导入第三方插件以如何应用</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">梳理针对vue开发综合项目百草味案例需求</span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p>
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <span style="font-size:16px;color:#009900;"><strong>Vue3.0来了,你还学动吗?</strong></span> </p> <p> <br /> </p> <p> 2020年9月底,Vue3.0正式版终于发布了。Vue<span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">在全球拥有 130 多万用户 ,它被应用于各种不同场景中。而在国内,更是<span>最火热前端框架,<span>2.0与3.0开发模式有了很大改变,所以</span>3.0全新版本势必会引发新一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握。</span></span> </p> <p>   </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好掌握Vue开发企业项目流程 。<br /> </span> </p> <p> <br /> </p> <p> <span id="__kindeditor_bookmark_end_43__"></span><span style="color:#009900;font-family:-apple-system, BlinkMacSystemFont, "font-size:16px;background-color:#FFFFFF;"><strong>本课程共包括三个模块</strong></span> </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">一、<strong>Vue基础篇</strong></span> </p> <p> <span style="background-color:#FFFFFF;">本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命周期等内容。</span><span style="background-color:#FFFFFF;color:#121212;">会带你深入理解Vue组件化技术,讲解全局组件和局部组件定义,组件间数据传递,以Vue内置组件等知识点。让你掌握模块化概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,</span><span style="color:#121212;">让你快速入门Vue3.0。</span><span style="background-color:#FFFFFF;color:#121212;"></span> </p> <p> <span style="background-color:#FFFFFF;color:#121212;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">二、<strong>Vue核心篇</strong></span> </p> <p> <span>这个模块会带你讲解Vue3.0全家桶知识点(Vue Router路由+Vuex状态管理),涉Vue路由用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。</span> </p> <p> <span><br /> </span> </p> <p> <span style="background-color:#FFFFFF;"> </span> </p> <p style="color:#121212;"> 三、<strong>项目实战篇</strong> </p> <span style="color:#121212;"></span> <p> 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用真实流程,更好掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。 </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#009900;"><strong>实战项目涉内容</strong></span> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202010240323559662.png" /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页