day8 vuex

最新推荐文章于 2024-07-18 15:48:23 发布
最新推荐文章于 2024-07-18 15:48:23 发布
阅读量94 收藏
点赞数
分类专栏： 学习 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20060031/article/details/103208947
版权
概念
官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的定义

说白了，Vuex就是一个全局变量管理器，诸如用户信息，地理位置这些可以在全局中使用又不想单独在每个组件中定义的变量，可以定义在Vuex当中。

响应式流程

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

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

以下是一个表示“单向数据流”理念的简单示意：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SSokHwi-1574436605677)(E:\font-end-note\vuejs\flow.png)]

以下是整个交互流程图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0DWkNlqb-1574436605679)(E:\font-end-note\vuejs\vuex.png)]

组成
state
概念

所有变量的集合定义，类似于数据源的存在

特点
  • 单一状态树
    • Vue定义每个应用只允许定义一个store
代码
  • Vuex
    • 代码位于store文件夹下
import Vuex from 'vuex'
import Vue from "vue"

Vue.use(Vuex)

const vuex = new Vuex.Store({
    state:{
        counter : 1
    }
})

export default vuex
  • main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  // 使用Vuex
  store
  
}).$mount('#app')
  • App.vue
<template>
  <div id="app">
     <h1>{{$store.state.counter}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>
注意

  • mapState函数

    当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 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
    }
  })
}
Getters
概念

有时候我们需要从 store 中的 state 中派生出一些状态，但是每一次都从state中取出这个数据又显得不是很理想。

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

参数

  • state

    接受state作为第一参数。这个state就是当前store定义的state

代码
  • store代码
import Vuex from 'vuex'
import Vue from "vue"

Vue.use(Vuex)

const vuex = new Vuex.Store({
    state:{
        counter : 1
    },
    getters:{
        getCounter(state){
            return state.counter
        }
    },
    mutations:{
        increase(context){
            context.state.counter ++
        }
    }
})

export default vuex
  • 组件中调用
<template>
  <div id="app">
      // 使用getters属性进行获取
     <h1>{{$store.getters.getCounter}}</h1>
  </div>
</template>
Mutation
概念

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

但是我们不能直接调用一个mutation handler。Vuex中的mutation 更像是事件注册。而事实上，mutation 中定义的也仅仅只是事件类型。如果想要调用，必须使用commit

store.commit('increment')
提交携带参数
  • 普通携带
import Vuex from 'vuex'
import Vue from "vue"

Vue.use(Vuex)

const vuex = new Vuex.Store({
    state:{
        counter : 1
    },
    getters:{
        getCounter(state){
            return state.counter
        }
    },
    mutations:{
        increase(state,index){
            state.counter = state.counter + index
        }
    }
})

export default vuex

<template>
  <div id="app">
     <button @click="increment(1)">increment</button>
     <h1>{{$store.state.counter}}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'app',
  data(){
    return {
      localCount : 1
    }
  },
  methods:{
    increment(index){
      this.$store.commit("increase",index)
    }
  }
}
</script>
  • payload携带方式
    • 此种方式可以携带一个对象
      • 对象中可以存储变量或者方法
import Vuex from 'vuex'
import Vue from "vue"

Vue.use(Vuex)

const vuex = new Vuex.Store({
    state:{
        counter : 1
    },
    getters:{
        getCounter(state){
            return state.counter
        }
    },
    mutations:{
        increase_payload(state,payload){
            console.log(payload)
            state.counter = state.counter + payload.index
        },
    }
})

export default vuex

<template>
  <div id="app">
     <button @click="increment_payload()">increment_payload</button>
     <h1>{{$store.state.counter}}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'app',
  data(){
    return {
      localCount : 1
    }
  },
  methods:{
    increment_payload(){
       this.$store.commit("increase_payload",{index:1})
    }
  }
}
</script>
提交风格

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  // 表示参数是amount，值等于10
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
注意事项

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

  1. 最好提前在你的 store 中初始化好所有所需属性。
  2. 当需要在对象上添加新属性时，你应该
  • 使用 Vue.set(obj, 'newProp', 123), 或者
  • 以新对象替换老对象。
使用常量替代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
概念

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。
  • 使用dispatch进行调用
参数
  • Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
代码
  • vuex
import Vuex from 'vuex'
import Vue from "vue"
import constants  from "./constant"

Vue.use(Vuex)

const vuex = new Vuex.Store({
    state:{
        counter : 2
    },
    mutations:{
        [constants.UPDATTE](state,counter){
            state.counter = counter
        }
    },
    actions:{
        power(context){
            window.setTimeout(()=>{
                let power = context.state.counter * context.state.counter
                context.commit(constants.UPDATTE,power)
            })
        },
    }
})

export default vuex
  • App.vue
<template>
  <div id="app">
     <button @click="action()">action</button>
     <h1>{{$store.state.counter}}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from "./store/constant"
export default {
  name: 'app',
  data(){
    return {
      localCount : 1
    }
  },
  methods:{
    action(index){
      this.$store.dispatch("power")
    },
  }
}
</script>
映射方法
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')`
    })
  }
}
Module
概念

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

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

)
}
}


##### Module

###### 概念

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

```js
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中的模块的getter，mutation，action对于开发者而言，与之前调用没有任何区别。
zhiweiHong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Day7 代码 vuex
08-11
Vue Day7 的学习重点在于了解和使用 Vuex，它是 Vue.js 应用状态管理的一个官方库。Vuex 提供了一个集中式的存储系统，用于管理和共享应用的状态，使得在复杂的应用中保持数据的一致性变得更容易。以下是对每个文件...
Day8 智慧商城 Vue2
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
day6 vuex
L197151_666的博客
10-25 53
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。对state中的数据进行加工（派生），类似vue中的computed，进行缓存，形成新的数据。是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。更改 Vuex 的 store 中的状态的唯⼀⽅法是提交 mutation。取getters中的值,通过this.$store.getters，进行统一的状态管理，解决不同组件共享数据的问题。操作，响应在视图上的用户输入导致的状态变化。
vue-day7 vuex
weixin_59865114的博客
02-25 374
目的：使用仓库的数据。
vue-day08 vuex
csdn_zy008的博客
12-02 116
vue-day08 1.vuex 什么是vuex？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 1.安装 npm i vuex --save 2.引入 main.js // import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) new Vue({ el: '#app', router, store:new Vuex
学习vue框架 day10 vuex
zpqyqs的博客
06-03 45
为了简化在数组中使用vuex中的数据和方法，同时可以避免代码冗余。2.在组件中使用vuex。3.辅助函数（映射函数）
vuex基础的知识.7z
06-08
"day14.md"可能涵盖了更高级的主题，例如如何在 Vue 组件中使用 Vuex、如何处理异步操作以及最佳实践。 最后，"code"文件夹很可能包含了示例代码，你可以通过阅读和运行这些代码来加深对 Vuex 工作原理的理解。 ...
vue2-day8.zip
08-10
8. **状态管理（Vuex）**：虽然不是Vue 2的核心部分，但Vuex是官方推荐的状态管理库，用于管理应用的全局状态，特别适合大型项目。 9. **生命周期钩子**：Vue 2组件有多个生命周期钩子函数，如`beforeCreate`、`...
Day_Planner
03-19
8. **状态管理**：如果项目变得复杂，可能需要引入状态管理库如Redux或Vue的Vuex，来更有效地管理和更新应用程序的状态，尤其是当有多个组件需要共享同一数据时。 9. **异步操作**：如果Day Planner有云同步功能，...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
最新发布
yrldjsbk的博客
07-18 359
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1307
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 571
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
【Vue】 style中的scoped
DX390609的博客
07-15 171
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 305
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
ReactRouter v6升级的步骤
feixin369的博客
07-14 431
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 258
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
使用 Vue3、Node.js、MySQL、Electron 和 Express 实现用户登录、文章管理和截屏功能
liyananweb的博客
07-15 689
通过本文，我们详细介绍了如何使用 Vue3、Node.js、MySQL、Electron 和 Express 实现一个完整的用户登录、文章管理和截屏功能的应用。希望这篇文章能为你提供有价值的参考，帮助你更好地理解和实现前后端分离的应用开发。如果你有任何问题或建议，欢迎在评论区留言讨论。
前端工具-json-server
zhangankang的博客
07-14 169
以项目为例，介绍前端mock数据的方式；
java8中的 MonthDay类介绍
05-30
Java 8引入了MonthDay类，该类表示一年中的某个月和某一天，但没有年份信息。MonthDay类提供了一些方便的方法来处理日期和月份，例如：比较两个MonthDay对象，获取它们之间的天数差异，以及将MonthDay对象转换为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值