vuex知识点总结

Vuex

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化

1. Vuex 基本思想
   借鉴了 Flux (opens new window)、Redux (opens new window)和 The Elm Architecture (opens new window)。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
2. 示意图
   

安装

点击此处看教程

vuex的使用

1. 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

组成

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  getters:{},
  mutations: {},
  actions:{},
  modules:{}
})

• Store
  每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

1. State

1. Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
2. 驱动应用的数据源，用于保存所有组件的公共数据.。

2. Getter

1. 可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

3. Motations

1. mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用

4. Actions

1. Action 类似于 mutation，不同在于：
   • Action 提交的是 mutation，而不是直接变更状态。
   • Action 可以包含任意异步操作。
2. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

5. Modules

1. 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

map高级语法

Map

类似于对象，是键值对的集合，但是key的范围不局限与字符串。各种类型均可以作为key

属性方法

set(key,value): 添加一个键值对 get(key): 获取一个key对应的value值 size: 返回Map结构的成员总数
has(key)：判断某个键是否存在Map结构中，返回boolean delete(key)： 删除某个指定的键值，返回boolean
clear(): 清除Map结构所有的成员

1. set

let map = new Map();
map.set("1","a");
map.set("2","b");
map.set("3","c");
或
let map = new Map([["1","a"],["2","b"],["3","c"]]);

2. delete

map.delete("1");

3. size

map.size;

4. has

map.has(1);// true

5. clear

map.clear();

遍历方法

keys()：返回一个键名的遍历器
values(): 返回一个键值的遍历器
entries(): 返回一个键值对的遍历器
forEach(): 使用回调函数遍历Map每个成员

keys()

for(let key of map.keys()){
     console.log(key);
     // 1  2  3
}

values()

for(let value of map.values()){
     console.log(value);
     // a  b  c
}

entries()

for(let [key,value] of map.entries()){
      console.log(key,value);
}

forEach()

map.forEach(function(value,key){
     console.log(value,key);
})

Map数据结构的定义

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map和object的对比

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 也就是说， Object
结构提供了“字符串—值”的对应， Map 结构提供了“值—值”的对应是一种更完善的 Hash
结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

Map的深入理解

简单的方法set get has delete

const m  = new Map()
const o = {x:'isX'}

m.set(o,'content')
console.log(m);
m.get(o)
console.log(m);
console.log(m.has(o));
m.delete(o)
console.log(m.has(o));

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const m = new Map([
    ['name','lisi'],
    ['age','18']
])

console.log(m.size);//2
console.log(m.has('name'));//true
console.log(m.get('name'));//lisi

vux的数据持久化

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失
我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。

1. 手动利用HTML5的本地存储
   1、vuex的state在localStorage或sessionStorage中取值；
   2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

这样state就会和存储一起存在并且与vuex同步

2.利用vuex-persistedstate插件
插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。

使用方法

安装

npm install vuex-persistedstate

之后使用这个插件在Store中

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
modules: {    
    cart,   //以模块的方式导出，这是专属于购物车的，可以再有一个共享登陆状态的，这样便于分类
  },
  plugins: [createPersistedState()]  //加上这个就可以了
})

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

默认持久化所有state