Vue之Vuex与本地存储的区别

hello！大家早上好呀！我又来分享小知识了！
今天想向大家分享一下vuex和本地存储的区别！首先你要知道什么是vuex和本地存储，不知道的小白同学也没有关系！我来拯救你们了。

一丶 Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
大白话：vue的全局仓库，用来存放数据

二 丶Vuex核心概念

1. State 对象类型，单一状态树（数据仓库）
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。
在 Vue 组件中获得 state里的状态(数据)呢
答：由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
state是一个大对象 数据以键值对形式存在 。
语法： store.state.xxx

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

 

2. Getters 对象类型，过滤state中的状态
大白话：类似于vue中的computed，具有过滤状态（数据）的作用
Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

 

也可以通过属性去访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

 store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] 

Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

 

 store.getters.doneTodosCount // -> 1  

3. Mutations 对象类型，同步方法存储位置，用来直接操作state里的状态
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，传进来的参数作为第二个参数（是一个对象）：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

 

 mutations: { 2  increment (state, n) { 3 state.count += n 4  } 5 }  

组件内如何调用Mutations里的方法呢？
答：store.commit('方法名')
4. Actions 对象类型，异步方法的存放位置，不可直接操作state，通过调用mutations里的方法操作state。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

 

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
组件内调用actions里的方法
语法：store.dispatch('方法名')

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

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

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

 

vuex就简单介绍到这里，想要继续学习的小伙伴请参考
【vuex是什么？】https://vuex.vuejs.org/zh/

三丶Vuex和本地存储的区别

1. 相同点

---------都可以存储数据

2. 不同点

--------Vuex是vue的全局状态管理，是将数据状态存储在内存中的，而H5存储是存储在本地（localStorage）和会话存储（sessionStorage）
--------Vuex主要用于组件之间的传值（单html），本地存储用于多页面之间传值（多html）
--------生命周期：Vuex是存储于内存的，只要页面刷新（F5刷新，清除内存）时，vuex存储的值就会丢失，这时就需要vuex数据持久化，可以通过下载vuex-persistedstate模块解决（原理还是利用本地存储技术），SessionStorage是会话级存储，窗口关闭就是清除，LocalStorage是永久性存储，除非清理缓存，否则永久性存储在本地。

以上就是Vuex和本地存储的简单介绍了！今天又是昏昏欲睡的一天，我是前端小白Sunshine，大家如有更好的理解也可以联系我，这样我就又可以学习一波了，那今天就到这里了，拜拜！

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。