Vuex相关的

发布于:2024-06-11 ⋅ 阅读:(17) ⋅ 点赞:(0)

什么是vuex:

  1. 首先vuex的出现是为了解决web组件化开发的过程中,各组件之间传值的复杂和混乱的问题

  2. 将我们在多个组件中需要共享的数据放到start中,

  3. 要获取或格式化数据需要使用getters,

  4. 改变start中的数据,可以使用mutation,但是只能包含同步的操作,在具体组件里面调用的方式this.$store.commit('xxxx')

  5. Action也是改变store中的数据,不过是提交的mutation,并且可以包含异步操作,在组件中的调用方式this.$store.dispatch('xxx'); 在actions里面使用的commit('调用mutation')

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

Vuex工作流程:

  1. 组件内可以通过dispatch触发Actions, Actions里面经常处理异步数据,

  2. 数据返回后可以通过Commit 来触发Mutations, 每次触发都可以通过Devtools观测到它的类型和传参,

  3. Mutations一般用来修改state里面的值, state里面的值变化了, 所有组件内的vuex的数据都变化了

  4. 如果没有异步请求的话可以直接在组件里面通过 Commit 触发 Mutations 修改state里面的值

vuex中有几个核心属性,分别是什么?

一共有5个核心属性,分别是:

  • state 唯一数据源,Vue 实例中的 data 遵循相同的规则

  • mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发

  • action Action 类似于 mutation,不同在于Action 提交的是 mutation,而不是直接变更状态,Action 可以包含任意异步操作

  • module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。

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 的状态

 

  • getters 可以认为是 store 的计算属性,就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值.

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)
    }
  }
})

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

vuex的getter的作用:

getter 有点类似 Vue.js 的计算属性,当我们需要从 store 的 state 中派生出一些状态,那么我们就需要使用 getter,getter 会接收 state 作为第 一个参数,而且 getter 的返回值会根据它的依赖被缓存起来,只有 getter 中的依赖值(state 中的某个需要派生状态的值)发生改变的时候才会被重新计算。

mutation 里面可以放异步吗?

非严格模式确实是可以放异步,代码也可以正常执行!严格模式下不能这样操作(写异步),会有警告。

不建议放异步代码,目的是为了形成数据快照(拿到当时的那个数据状态)便于溯源,为了配合 DevTools 调试。

vuex中的数据在页面刷新后数据消失

用sessionstorage 或者 localstorage 存储数据

存储: sessionStorage.setItem( '名', JSON.stringify(值) )
使用: sessionStorage.getItem('名') ---得到的值为字符串类型,用JSON.parse()去引号;