vuex详解

已于 2022-07-28 10:30:30 修改
阅读量229 收藏
点赞数
文章标签： vue.js javascript 前端
于 2018-09-03 17:01:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juse__we/article/details/82348721
版权

参考网站：开始 | Vuex

Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。（其他组使用相同状态的组件会自动更新，不想全局变量要被调用相应的地方才更新）

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

使用示例

创建store

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  // 提供一个初始 state 对象和一些 mutation
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

组件调用相应状态

// 通过 store.state 来获取状态对象
store.commit('increment')

// 通过 store.commit 方法触发状态变更
console.log(store.state.count) // -> 1

通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

state（初始化数据对象类似vue里的data属性）

基础

如实例所讲 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

根组件“注入”

情景：在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

解决方案：通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。（子组件更新还算是通过compute属性计算）

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

// 子组件访问状态
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 辅助函数

场景：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

使用示例：computed: mapState({ '状态名'})

// 在单独构建的版本中引入辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Getter（获取state的数据值，可对获取的值做一定操作，有缓存）

场景：有时候我们需要从 store 中的 state 中派生出一些状态（如从一串数字中获取大于5的数字）

解决方法：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

代码示例：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    // state为第一个参数
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // getter自身可为第二个参数
    doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
    }
  }
})

// 通过属性访问
computed: {
  doneTodos() {
    return this.$store.getters.doneTodos
  },
  doneTodosCount() {
    return this.$store.getters.doneTodosCount
  }
}

 getter 传参

注意：getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

代码示例：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

// 通过方法访问
computed: {
  doneTodos() {
    return this.$store.getters.getTodoById(2)
  },
}

getter的mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
      // ...
    ])
  }
}

Mutation（同步，更改state的值）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。在子组件的methods方法中调用

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    // 类型为 increment,后面是该类型下的回调函数
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

// 不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”
 methods: {
    a(){
     store.commit('increment')
    }
 }

mutation 的 载荷

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

mutations: {
  increment (state, n) {
    state.count += n
  }
}

// 调用

methods: {
    a(){
       store.commit('increment', {
          amount: 10
        })
    }
 }

// 参数也可以是个对象
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
// 调用
 methods: {
    a(){
        store.commit('increment', {
           amount: 10
        })
    }
 }

Mutation 需遵守 Vue 的响应规则

  1. 最好提前在你的 store 中初始化好所有所需属性。

  2. Mutation 必须是同步函数（放置嵌套的mutation因获取不到上一不得值的根性，而更新失误）

  3. 当需要在对象上添加新属性时，你应该

  • 使用 Vue.set(obj, 'newProp', 123), 或者

  • 以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

    // ...为es6的扩展运算符
state.obj = { ...state.obj, newProp: 123 }

 mapMutations 辅助函数

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Action（异步，更改state的值）

 由于mutation 必须同步执行，所以我们可以在 action 内部执行异步操作。

区别：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

分发 Action（触发action）

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

Actions 支持同样的载荷方式和对象方式进行分发

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

mapActions 辅助函数

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

组合 Action

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

actions: {
  // 我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },
  // 在另外一个 action 中也可以
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  } 
  // async/await写法
  async actionD ({ commit }) {
    commit('gotData', await getData())
  },
  async actionD ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  },
}

// 调用

store.dispatch('actionA').then(() => {
  // ...
})

Module

场景：多模块开发时，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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

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

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

问题集锦

1.当store变更后，刷新页面会怎样？

刷新后，store回还原，解决方法：通过session或者localstorage存储下来，没次读取前先查session或者localstorage看是有有值

juse__we
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex基础知识
weixin_43484007的博客
11-06 456
在开发中，应用程序有时需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们称之为。
Vuex详解.pptx
08-05
"Vuex详解" Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理到底是什么？ 状态...
58.Vuex使用1 引入
weixin_45843676的博客
02-24 406
58.Vuex使用1 引入
【vue3|第6期】如何正确地更新和替换响应式对象reactive
最新发布
Commas的博客
06-05 1225
在Vue3中，响应式系统是通过reactive函数创建的，它返回一个响应式代理对象。这个代理对象封装了原始对象，并提供了拦截器来处理对原始对象的访问和修改。然而，当涉及到更新或替换响应式对象时，开发者需要特别注意，因为不当的操作可能会导致响应式丢失。在Vue3中，更新响应式对象时，开发者应该避免直接重新赋值。相反，应该使用或展开运算符来合并或替换对象的属性。这样可以确保响应式系统能够正确地跟踪数据的变化，并在视图中进行相应的更新。希望本文能帮助你更好地理解Vue3中响应式对象的更新和替换。
vuejs基础之监听watch，computed，methods事件
上善若泪
11-04 994
文章目录1 使用键盘监听2 使用监听事件2.1 watch监听2.1.1 监听属性2.1.2 监听路由2.2 computed监听3 watch,computed和methods三种对比 需求分析： 假如有两个姓名框，需要他们拼接成全名字 怎么监听到文本框数据的改变，这样才能知道什么时候去拼接 出一个全名 如何监听到文本框的数据改变呢 1 使用键盘监听 主要是使用了键盘的监听事件即method的方法事件 页面部分代码 <div id="app"> <input type="te
Vuex详细讲解
CaiHongDaDa的博客
04-13 918
这里写目录标题Vuex是什么？Vuex应用背景Vuex应用场景Vuex的使用1.安装2.新建store文件3.main.js实例挂载store4.测试Vuex数据Vuex的核心部分1.state2.Getter3.Mutation4.Actions5.module Vuex是什么？ 一个程序里面的状态管理模式，它是集中式存储所有组件的状态的小仓库，并且保持我们存储的状态以一种可以预测的方式发生变化。 Vuex应用背景 假如是多级嵌套关系，你可以使用父子组件传参进行解决，虽有些麻烦，但好在可以解决；对于兄弟组
vue–vuex详解
12-08
Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件...
vue--vuex详解
10-17
Vue Vuex 是一个专门为 Vue.js 应用程序设计的状态管理模式，旨在集中管理所有组件的状态，并确保状态的变化遵循可预测的方式。它的出现解决了在大型项目中组件间通信和逻辑代码组织的复杂性问题。Vuex 提供了一种...
vuex详解及入门案例.md
12-26
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 本文对Vuex的使用场景和核心概念进行了详细介绍,并且有完整...
09-Vuex详解.pdf
09-18
Vuex 是一个专门为 Vue.js 应用程序设计的状态管理模式，旨在集中管理应用中所有组件的状态，并确保状态以可预测的方式发生变化。它与 Vue.js 的官方调试工具 devtools extension 集成，提供了如时间旅行调试、状态...
Vuex详解
哈
07-05 283
Vuex 是一个专为 Vue.js 应用程序开发的状态管理解决方案。它采用集中存储的方式管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 最后做下总结，我们使用 Store/State 定义和管理应用的核心数据，在组件中通过compute属性调用Getters 中的数据，如果我们要操作数据，我们可以通过使用 dispatch 方法调用已注册的 Actions 方法，Actions 再去调用相关的 mutations 进行数据的操作。 第二步：Vue页面一 第三步：Vue
实现模糊搜索时Vuex的computed踩坑记录
lwj_0415的博客
01-08 245
记录实现模糊搜索调用的是vuex的数据踩过的坑
Vuex的计算属性（computed 和 watch）与方法methods的区别？
weixin_58155690的博客
07-01 1186
Vuex的计算属性（computed 和 watch）与方法methods的区别
vue知识汇总
juse__we的博客
04-04 390
vue考点 https://segmentfault.com/a/1190000016344599 vue的双向绑定原理及实现 https://www.jianshu.com/p/d33c16075c88 先observe所有数据，然后compile解析模板，添加watcher，watcher在get函数中使用到了数据触发get方法，在订阅器中添加订阅 eventBus https:/...
使用js，根据属性值判断对象数组中是否包含某个obj，有则替换无则添加
qq_42127308的博客
01-09 3787
需求：判断数组对象中是否有某个对象，有则替换无则添加 /** * 判断数组对象中是否有某个对象，有则替换无则添加 * @param {*} initialArr 源数组 * @param {*} obj 判定的对象 * @param {*} pro 对象中的某个属性（通常为id） */ export const formateArrObjData = (initialArr, obj.........
vue给是指定的数组对象替换属性值
yuzheh521的博客
06-23 765
this.$set(this.commentList[index], '属性名', 属性值);
vue数组对象修改时无法响应的替换方法
weixin_43623808的博客
12-04 1471
vue中使用下标修改数组数据，如this.list[0]="asd或者修改数组长度，如this.list.length=3，都不会响应式的修改dom元素，但是没响应并不是没有改变数据，改变了数据只是vue无法响应此修改方式。 可以下载一个 Vue-Devtools 可以很清楚的看见数据变化，也可以在控制台打开sources打个断点查看数据，不会的话可以去看这里 const first=ne...
vue对象更新检测
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
03-16 730
数组更新检测 变异方法 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 替换数组 变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating meth...
vue-vuex详解
11-18
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值