vuex和localstorage语法

什么是vuex?

vuex是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。

要点:

  1. vue官方搭配,专属使用 (类似于:vue-router),有专门的调试工具
  2. 集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }}
  3. 数据变化是可预测的 (响应式)

安装方式:

npm install vuex@next --save  或  yarn add vuex@next --save

Vuex 核心概念 :

state:用于存储维护组件的公共状态,

getters:用于对state中的数据进行相关处理后并返回,类似于计算属性,

mutations:是修改state的唯一途径,进行的是同步操作,

actions:要执行的操作,可以是同步或异步事件,

modules:内部可以存放多个仓库配置对象,用于对仓库进行模块划分

Vuex 和单纯的全局对象的不同点 

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

localstorage

译为“本地存储器”,是HTML5中新增的一个存储对象,跟cookie一样也是用来本地存储来的,但是解决了cookie存储空间不足的问题(cookie每条存储空间为4k),而localStorage浏览器一般支持5M。

语法 :

你可能感兴趣的:(vue.js,javascript,前端)