vuex

vuex

  • 简介
    • 单界面到多界面的状态管理切换
    • 运行下载使用
    • 事件更改counter 大管家
  • vuex核心概念
    • state
    • getters
    • mutations

简介

vuex_第1张图片
vuex_第2张图片

单界面到多界面的状态管理切换

vuex_第3张图片
vuex_第4张图片

运行下载使用

npm install vuex --save
vuex_第5张图片
store 文件夹 index.js文件夹
vuex_第6张图片
vuex_第7张图片
------dddd
vuex_第8张图片
vuex_第9张图片
vuex_第10张图片
vuex_第11张图片

事件更改counter 大管家

vuex_第12张图片
vuex_第13张图片
vuex_第14张图片
vuex_第15张图片

vuex核心概念

state

vuex_第16张图片
vuex_第17张图片

getters

vuex_第18张图片
类似于计算属性
使用变化之后的counter,counter的平方
vuex_第19张图片
vuex_第20张图片
最基本实用
案例:
vuex_第21张图片
vuex_第22张图片
computed内容
也可简写为如下所示:
vuex_第23张图片
页面使用如下:
vuex_第24张图片
如果多页面共用,没必要计算属性
直接在getters中写
vuex_第25张图片
vuex_第26张图片
vuex_第27张图片
getters补充
vuex_第28张图片
传入一个要大于的年龄,然后满足展示需求
vuex_第29张图片
vuex_第30张图片

也可简写为如下
vuex_第31张图片
总结:
vuex_第32张图片

mutations

你可能感兴趣的:(Vue)