前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >老雷PHP全栈开发教程之vuex

老雷PHP全栈开发教程之vuex

作者头像
老雷PHP全栈开发
发布2020-07-02 12:15:18
6980
发布2020-07-02 12:15:18
举报
文章被收录于专栏:老雷PHP全栈开发

本节课程内容主要讲解vuex的使用,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

内容

https://vuex.vuejs.org/zh/

Vuex 是什么?

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

Vuex项目结构

├── index.html

├── main.js

├── api

│ └── ... # 抽取出API请求

├── components

│ ├── App.vue

│ └── ...

└── store

├── index.js # 我们组装模块并导出 store 的地方

├── actions.js # 根级别的 action

├── mutations.js # 根级别的 mutation

└── modules

├── cart.js # 购物车模块

└── products.js # 产品模块

核心概念

state 状态 相当于data 但不可更改

getters store 的计算属性

store.getters.doneTodosCount

mutations 唯一可改变state的方法 ,方法内计算必须同步

store.commit('increment')

actions 操作mutations的动作

store.dispatch('increment')

Module 将store拆分成不同文件

js知识扩展

Promise async await

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值。

async 异步函数

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

AsyncFunction 构造函数用来创建新的 异步函数 对象,JavaScript 中每个异步函数都是 AsyncFunction 的对象。

await 异步方法内同步阻塞 转promise为值

... 解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

var a=[1,2,3]

var b=[...a,4,5,6]

console.log(b)

辅助函数

mapState

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

mapGetters

辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

mapActions

辅助函数将组件的 methods 映射为 store.dispatch 调用

//例子

代码语言:javascript
复制
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state,param) {
      state.count++
    }
  },
  actions: {
  increment (context,param) {
      context.commit('increment')
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 老雷PHP全栈开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档