全栈开发技术分享
首页
👉 CSS大揭秘 👈
  • 目录
  • 分类
  • 标签
  • 归档
  • Vue
  • JavaScript
  • 微信开发
  • 移动端H5调试工具
  • 国内十大前端团队网站
  • Nodejs
  • Egg
  • 环境搭建
  • 运维面板
  • 域名配置
  • Nginx
  • 收藏
  • 常用工具
  • 实用技巧
  • 常用命令
  • 友情链接
关于

Dreaming Lee 🍍 ҉҉҉҉҉҉҉҉

开发小菜鸡
首页
👉 CSS大揭秘 👈
  • 目录
  • 分类
  • 标签
  • 归档
  • Vue
  • JavaScript
  • 微信开发
  • 移动端H5调试工具
  • 国内十大前端团队网站
  • Nodejs
  • Egg
  • 环境搭建
  • 运维面板
  • 域名配置
  • Nginx
  • 收藏
  • 常用工具
  • 实用技巧
  • 常用命令
  • 友情链接
关于
  • 代码规范

    • Eslint
    • Eslint-Plugin-Vue
    • Stylelint
  • uniapp

    • 问题解决

      • 【uniapp】字节小程序BUG - “navigateToMiniProgram/getUserProfile:fail must be invoked by user tap gesture”
  • JavaScript

    • JS验证18位身份证号码
    • JS图片压缩
    • JS调用elementUI图片预览
    • JS图片上传前校验大小、尺寸
  • Vue

    • Vue基础教程

      • Vue教程(1)-基础篇
      • Vue教程(2)-路由篇Vue-Router
      • Vue教程(3)- 状态管理Vuex
        • 1、构造器选项
        • 2、Vuex.Store实例属性和方法
        • 3、辅助函数
        • 4、项目结构
        • 5、其他
    • Vue自定义组件开发

      • Vue实现移动端轮播swiper组件
      • Vue实现switch开关组件
    • Vue扩展

      • Vue接入阿里OSS文件上传
    • Vue学习参考资料
  • 微信开发

    • 微信开发参考资料
    • 微信公众号

      • 微信公众号/订阅号/服务号主动给用户发消息
      • 微信jssdk自定义分享在iOS不生效
    • 微信小程序

      • 微信小程序区分运行环境:开发版/体验版/正式版
      • H5唤醒微信小程序
  • 收藏

    • 国内十大前端团队官网及GitHub
  • 常见问题解决

    • js错误

      • iframe下localStorage禁止访问。“Failed to read the localStorage property from Window”
      • TypeError: Promise.allSettled is not a function
    • IE兼容

      • fixed定位在IE下页面滚动时抖动
  • 工具

    • 移动端H5调试工具
  • 前端
  • Vue
  • Vue基础教程
Dreaming Lee 🍍 ҉҉҉҉҉҉҉҉
2021-05-10

Vue教程(3)- 状态管理Vuex

# 1、构造器选项

import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })
state: Object | Function  # 用来数据共享数据存储
getters: { [key: string]: Function }  # 用来对共享数据进行过滤操作
mutations: { [type: string]: Function }  # 用来注册改变数据状态
actions: { [type: string]: Function }  # 解决异步改变共享数据
modules: Object   # 包含了子模块的对象,会被合并到 store
plugins: Array<Function>  # 一个数组,包含应用在 store 上的插件方法
1
2
3
4
5
6
7
8

# 2、Vuex.Store实例属性和方法

state: Object
getters: Object
commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)   # 提交 mutation
dispatch(type: string, payload?: any, options?: Object)  
dispatch(action: Object, options?: Object)  # 分发 action
replaceState(state: Object)  # 替换 store 的根状态
watch(fn: Function, callback: Function, options?: Object): Function  # 监听
subscribe(handler: Function): Function  # 订阅 store 的 mutation
subscribeAction(handler: Function): Function  # 订阅 store 的 action
registerModule(path: string | Array<string>, module: Module, options?: Object)  # 注册一个动态模块
unregisterModule(path: string | Array<string>)  # 卸载一个动态模块
hotUpdate(newOptions: Object)  # 热替换新的 action 和 mutation
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3、辅助函数

mapState
mapGetters
mapActions
mapMutations
createNamespacedHelpers
1
2
3
4
5

# 4、项目结构

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5、其他

// 插件
const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})
1
2
3
4
5
6
7
8
9
10
11
12
// 内置 Logger 插件
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
  plugins: [createLogger()]
})
1
2
3
4
5

开启严格模式:无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。

const store = new Vuex.Store({
  // ...
  strict: true
})
1
2
3
4
上次更新: 2021-05-10 14:08:54
Vue教程(2)-路由篇Vue-Router
Vue实现移动端轮播swiper组件

← Vue教程(2)-路由篇Vue-Router Vue实现移动端轮播swiper组件→

最近更新
01
【uniapp】字节小程序BUG - “navigateToMiniProgram/getUserProfile:fail must be invoked by user tap gesture”
06-21
02
七牛云上传自有证书
04-27
03
使用腾讯云申请免费SSL证书
04-27
更多文章>
Theme by Vdoing | Copyright © 2020-2024 | 豫ICP备2020030395号 | 靳立祥 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式