vue全家桶之vuex数据状态管理

编程入门 行业动态 更新时间:2024-10-15 12:29:24

vue<a href=https://www.elefans.com/category/jswz/34/1770131.html style=全家桶之vuex数据状态管理"/>

vue全家桶之vuex数据状态管理

前言:今日课程准备

  • 1.新建一个脚手架项目: 01-vuex
  • 2.添加路由router和vuex
    • 如果创建脚手架的时候没有勾选,可以分别在根目录执行两个命令进行安装
      • vue add router
      • vue add vuex
  • 3.创建三个页面: home.vue my.vue TodoList.vue , 并且配置好对应路由
    • 可以直接从课程资料复制过来
  • 4.今日学习路由
    • 在home.vue 和 my.vue中我们将会学习vuex几乎所有的语法
    • 综合案例:使用vuex重构我们第三天的案例TodoList

01-vuex全局数据管理(vue全家桶04)

​ vue全家桶 = axios(网络请求) + vueRouter(路由单页面应用) + vueCli(脚手架) + vuex(全局数据管理) + vant移动端布局(PC端elementUI)

  • 官网文档:/
  • vuex作用:实现所有组件间的数据共享
  • 本章节学习目标
    • 了解vuex的应用场景 (在哪用)
    • 掌 么用)

1.1-vuex介绍

回顾组件关系和通信方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwXB64bq-1664019534533)(day07.assets/image-20210323175925844.png)]

序号组件关系数据通信
1父子关系子传父:$emit ; 父传子:props
2非父子关系eventBus: $on + $emit
3非父子关系vuex

和我们已经学过的父子通信和兄弟通信类似,vuex也是一种组件通信解决方案

1.1.1-组件传值的几种方式

  • 1.在现代化开发中,组件化已经成为主流开发了。

  • 2.每一个组件的数据是独立的, 每个组件有着自己的状态(数据)

  • 3.在实际开发中,一个组件需要访问另一个组件中的数据是非常常见的。这时候需要进行组件通讯。

  • 常见的组件通讯

    • 父传子 props
      • 单向数据流
    • 子传父 $emit
      • 事件通知
    • 兄弟组件传值(了解即可,现在基本处于废弃状态):event bus 通用组件通讯的解决方案

1.1.2-为什么要有vuex

  • 1.vuex的作用是解决多组件状态共享的问题,在大型的项目中,组件通讯会变得很混乱,使用vuex可以统一管理组件之间的通讯
    • 它是独立于组件而单独存在的,所有的组件都可以把它当作一座桥梁来进行通讯。
  • 2.使用vuex好处
    • 响应式 : 只要vuex中的数据变化,对应的组件会自动更新(类似于vue数据驱动)
    • 操作更简洁 : 类似于sessionStorage,只有几个方法

1.1.3-vuex使用场景

实际开发中,组件传值大多数情况下还是使用 父子组件传值

少部分情况下会用vuex. (数据需要在非常多的页面使用,比如用户头像,好几个页面都要显示那种)

  • 1.不是所有的场景都适用于vuex,只有在必要的时候才使用vuex,如果不必要,尽量别用
    • 使用了vuex之后,会一定程度上增加了项目的复杂度
  • 2.适合使用vuex场景
    • 这个数据需要在很多个地方使用,如果采用组件传值方式,写起来很麻烦,而且多个地方都要写
      • 例如:用户信息(姓名,头像),可能会在很多个地方使用(个人页面,评论页面等)
  • 3.不适合使用vuex场景
    • 这个数据不需要多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit
  • 4.vuex特点
    • (1)所有组件数据共享
    • (2)响应式: 一旦vuex数据修改,所有使用的地方都会自动更新

知识点验收

  • 1.vuex作用
    • 所有组件,共享数据
  • 2.vuex场景 : (思考:是不是有了vuex,以前的父子组件传值就没有用呢?)
    • vuex会增加项目复杂程度,如果不需要使用,尽量不要用
    • vuex使用场景 : (1)多个组件都需要使用的数据:共享 (2)组件传值比较麻烦(不是父子关系)
    • vuex不推荐场景 : (1)数据不需要在多个组件使用:不共享 (2)组件传值比较容易(父子传值)

1.2-vuex使用流程

使用步骤:

  1. vue-cli中整合==(如果使用vue ui创建创建,直接勾选vuex,会自动帮我们完成配置)==
    1. vue add vuex
      1. 如果提示,选择y
      2. 创建了/src/store/index.js
      3. main.js导入并挂载到Vue实例上
    2. state中定义数据
  2. 任意组件中
    1. this.$store.state.xxx即可取值改值
    2. template中可以不用写this
    3. 可以通过计算属性简化编码
  3. .js文件中
    1. 导入store对象即可获取属性

注意:

  1. vue-cli创建的项目中如何整合vuex
    1. vue add vuex
  2. vuex的数据定义在哪里?
    1. state
  3. 组件中如何获取vuex中的数据?
    1. this.$store.state.xxx
    2. html结构中this可以省略

1.3-vuex核心概念-state

  • state作用: 存储公共数据

  • ./vuex/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({//1.state作用:存储数据state: {user:{name:'ikun',age:30}},getters: {},mutations: {},actions: {},modules: {}
})
  • home.vue
    • my.vue也可以使用vuex数据哟
<template><div><h1>首页</h1><button>点我修改vuex数据</button><br><button>点我发送ajax请求</button><div><h2>个人信息</h2><p>我的名字是:{{ $store.state.user.name }}</p><p>我的年龄是:{{ $store.state.user.age }}</p></div><div><h2>图书管理信息</h2><ul><li></li></ul></div></div>
</template><script>
export default {name:'home',
}
</script><style scoped>
p{color:red;
}
</style>

1.4-getters派生状态(计算属性)

  • 语法如下

    • 1.现在getters中声明一个计算属性
  • new Vuex.store({// 省略其他...getters: {// state 就是上边定义的公共数据state计算属性名: function(state) {return 要返回的值}}
    })
    
  • 2.使用getter中的计算属性

    • $store.getters.getter的名字
      
  • ./vuex/index.js

  • import Vue from 'vue'
    import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({//1.state作用:存储数据state: {user:{name:'ikun',age:30}},/* 2.2.getter作用: 官方术语:从state中派生状态(使用state中的数据,计算得出一些新数据)说人话: 相当于state的计算属性 */getters: {getInfo(state){//state:就是vuex上面的statereturn `我是${state.user.name},我今年${state.user.age}岁了`}},//2.mutations: {},actions: {},modules: {}
    })
  • home.vue

  • <div><h2>个人信息</h2><p>我的名字是:{{ $store.state.user.name }}</p><p>我的年龄是:{{ $store.state.user.age }}</p><p>自我介绍:{{ $store.getters.getInfo }}</p>
    </div>
    

1.5-vuex核心概念- Mutations

  • 1.Mutation作用:更新state中的数据

    • 疑问?: 既然可以直接通过this.$store.state来修改,为什么不能这么写呢?
    • 原因: 在组件中直接state,我们的vue tools不会追踪数据的修改,这样不便于维护(不知道这个全局数据什么时候被修改了,再加上vuex是全局响应式的,一旦修改所有使用的地方全部修改。非常不便于维护)
      • 另外:在严格模式下,直接修改state会报错
  • 2.Mutation语法如下:

    • 分两个格式: 注册的格式,调用的格式

    • 定义格式: 如下

      new Vue.store({// 省略其他...mutations:{// 每一项都是一个函数,可以声明两个形参mutation名1:function(state [, 载荷]) {},mutation名2:function(state [, 载荷]) {},
      }
      })
      
      • 每一项都是一个函数,可以声明两个形参:
        • 第一个参数是必须的,表示当前的state。在使用时不需要传入
        • 第二个参数是可选的,表示载荷,是可选的。在使用时要传入的数据
          • 专业术语载荷:表示额外的参数
    • 使用格式

      this.$storemit('mutation名', 载荷实参 )
      
  • ./vuex/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({//1.state作用:存储数据state: {user:{name:'ikun',age:30}},/* 2.2.getter作用: 官方术语:从state中派生状态(使用state中的数据,计算得出一些新数据)说人话: 相当于vuex的计算属性 */getters: {getInfo(state){//state:就是vuex上面的statereturn `我是${state.user.name},我今年${state.user.age}岁了`}},//3.mutations作用:修改state中的数据mutations: {setUser(state,newData){state.user = newData}},actions

更多推荐

vue全家桶之vuex数据状态管理

本文发布于:2024-03-15 01:30:03,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1737810.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:全家   状态   数据   vue   vuex

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!