一、vuex
概念
官网:Vuex 是什么? | Vuex (vuex3.x使用于vue2) Vuex 是什么? | Vuex ((vuex4.x 使用于vue3)
vuex是共享数据管理,和vue-router一样都是vue的核心插件之一(基本配置方式和vue-router相似)
vuex的思想大部分借鉴了react中的状态管理 redux(前身:flux)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
使用场景
构建大型的单页面应用时,可能会考虑在组件外部进行更好的状态管理
很多组件都要用到这个共享状态时,那么这种情况我们就需要vuex,因为这种方法最简单
下载并使用
自主下载
npm i vuex@3 + vuex@3.6.2
配置
在src 下创建 store/index.js
// 配置仓库 // 引入vue import Vue from "vue" // 引入vuex import Vuex from "vuex" // 在vue中注入vuex Vue.use(Vuex) export default new Vuex.Store({ state:{ // 存储共享数据 }, getters:{ // 对共享数据做一些处理:相当于计算属性 }, mutations:{ // 方法,处理数据(把组件中传过来的数据进处理,重新设置给state) }, actions:{ // 方法,处理数据 介于mutations和组件之间的中间层 } })
在main.js中
import store from "./store" new Vue({ router, store, render: h => h(App) }).$mount('#app')
使用:在组件中
{{$store}}
this.$store
脚手架下载
(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors ( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
核心属性 * * * *
1、state
单一的状态数据,唯一的数据源
export new Vuex.Store({ state:{ //这里定义所有状态管理数据 key:value } })
使用:在组件中
{{$store.state}}
this.$store.state
2、mutations
视图:
<template> <div> <!--0、渲染仓库中的数据--> <!--4、更新仓库中的数据--> <h1>{{$store.state.msg}}</h1> <!-- 1、触发changemsg 函数--> <button @click="changemsg">修改msg</button> </div> </template>
changemsg(){ // console.log(this.$store);//commit 向仓库提交修改请求 // 语法:this.$store.commit("突变类型",参数) // 2、触发AA突变事件 this.$store.commit("AA","我不好") }
仓库:
mutations: { // 书写习惯:mutations 和actions 用大写 //3、AA被触发 AA(state,payload){ // console.log(state,"aa"); // state.msg="你好世界" //4、修改state中的数据 state.msg=payload }, }
3、actions
语法和mutation一样
可以操作同步和异步
不能直接去修改state,因为修改state的唯一方式只能是mutation,action只能去提交给mutation
视图:
<template> <div> <!--0、渲染仓库中的数据--> <h1>{{$store.state.msg}}</h1> <!-- 1、触发changemsg 函数--> <button @click="changemsg">changemsg</button> </div> </template>
changemsg() { // dispatch 派遣 到action // this.$store.dispatch("派遣事件",实参) //2、触发派遣事件BB this.$store.dispatch("BB","我也不好") }
仓库:
actions:
actions: { // 3、BB被触发 BB({commit},payload){ // console.log(state,"bb"); // commit("突变事件",参数) 向mutation提交数据 //4 、 触发突变CC事件 并传参 commit("CC",payload) }, },
mutations: { // 5、CC被触发 CC(state,payload){ // state.msg="你好世界" //6、修改state中的数据 state.msg=payload }, },
4、getters
类似于计算属性,可以把大量的逻辑计算放置在getters中,当前的getters具有缓存的效果
我们一般会把他当做是state和视图的中间层
仓库:
export default new Vuex.Store({ state:{ // 1、先有数据 users:[ { id:1, username:"zs", userinfo:{ nickname:"张三", realname:"李四" } } ] }, getters: { // 当做计算属性使用 getname(state){ // 计算 // return 计算的结果 // 2、state中的数据通常是从数据库中请求过来的,数据结构比较复杂 // 我们会先在getters中做一些处理在返回 // return "赵四儿" return state.users[0].userinfo.nickname } }, })
视图:
<!-- 直接使用state --> <h1>{{$store.state.users[0].userinfo.nickname}}</h1> <!--使用getters处理好的数据--> <h1>{{$store.getters.getname}}</h1> <!--使用getters处理好的数据--> <h1>{{name}}</h1>
data(){ return { name:"" } }, mounted() { // 在js中使用state和getters // this.name=this.$store.state.users[0].userinfo.nickname this.name=this.$store.getters.getname },
5、modules
为了减少state属性的冗余问题,才出现modules模块的概念
当使用单一状态树时,应用的所有状态都会集中到一个比较大的对象上,当应用变的非常复杂的时候,store的对象就变的非常臃肿
所以,vuex允许我们将store切割成不同的模块,每一个模块中,都可以有自己的state、mutations、actions、getters,甚至是modules
modules:{ moduleA:{ state:{}, mutations:{}, actions:{}, getters:{}, modules:{} } }
vuex和离线存储的区别
相同:可以实现数据共享
不同:
1、vuex是响应是的数据变化,当数据发生变化,所有引入这个数据的位置都会自动刷新(都会跟着变化)
2、离线存储中,没有响应式的机制,当数据发生变化,要重新刷新浏览器,应用的地方才会跟着改变
3、vuex不能数据持久化(不能存储),一刷新就会就会回到初始状态
4、离线存储可以实现数据持久化
总结:真正做项目的过程中,就是要结合使用,离线存储要和vuex共同使用
辅助性函数
目的:让代码尽可能的简洁(想用就用,不想用就不用)
mapState
<template> <div> <h1>辅助性函数</h1> <h1>{{msg()}}</h1> <h1>{{msg1()}}</h1> <h1>{{msg2()}}</h1> <h1>{{msg3()}}</h1> <h1>{{msg4()}}</h1> </div> </template>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex" export default { data() { return { // 展开参数 ...mapState(["msg","msg1","msg2","msg3","msg4"]) // msg: ƒ, msg1: ƒ, msg2: ƒ, msg3: ƒ, msg4: ƒ } } }
原文地址:https://www.jb51.cc/wenti/3280904.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。