网站开发一般流程,设计师可以接单的网站,国字型布局网站,外贸网站怎么做推广#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue
⛺️稳中求进#xff0c;晒太阳 目录
Vue概述
是什么
场景#xff1a;
优势
构建多组件共享环境
创建一个空仓库
核心概念 - state 状态
1. 提供数据
2.使用数据
编辑
… 个人主页五敷有你 系列专栏Vue
⛺️稳中求进晒太阳 目录
Vue概述
是什么
场景
优势
构建多组件共享环境
创建一个空仓库
核心概念 - state 状态
1. 提供数据
2.使用数据
编辑
通过辅助函数简化
核心概念 - mutations
步骤
传参
辅助函数mapMutations
核心概念 - actions
辅助函数
核心概念 - getters
步骤 通过辅助函数mapGetters映射
核心概念 - 模块module(进阶语法)
使用模块中的数据
state
getters
mutation Vue概述 是什么
vuex是一个vue的状态管理工具状态就是数据
大白话vuex是一个插件可以帮我们管理vue通用的数据(多组件共享的数据)
场景
某个状态在 很多组件 来使用(个人信息)
多个组件 共同维护 一份数据 购物车
优势
共同维护一份数据数据集中化管理响应式变化操作简洁vuex提供了一些辅助函数
构建多组件共享环境
目标基于脚手架创建项目构建vuex多组件数据共享环境 创建一个空仓库
目标安装vuex插件初始化一个空仓库 yarn add vuex3 npm install vuex3 --save新建store/index.js 专门存放vuexVue.use(Vuex) 创建仓库new Vuex.Store //这里存放的是vuex相关的核心代码 目录 store/index.js
import Vue from vue
import Vuex from vuex//安装插件
Vue.use(Vuex)//创建仓库
const storenew Vuex.Store()export default store 4. 在main.js导入挂载
new Vue({render: h h(App),store:store
}).$mount(#app)核心概念 - state 状态
目标明确如何给仓库提供数据如何 使用 仓库的数据
1. 提供数据
State提供唯一的公共数据源所有共享数据都要统一放到Store中的State中存储在state对象中可以添加我们要共享的数据
//这里存放的是vuex相关的核心代码
import Vue from vue
import Vuex from vuex//安装插件
Vue.use(Vuex)//创建仓库
const storenew Vuex.Store({//state 状态即数据类似于Vue组件中data/**区别* 1.data是组件自己的数据* state是所有组件共享的数据*/state:{count:101}
})export default store
2.使用数据 1.通过store直接访问 通过辅助函数简化 mapState是辅助函数帮我们把store中的数据自动映射到组件的计算属性中 templatediv{{ title }}/div
/template
script
//导入mapState
import { mapState } from vuexexport default({created(){console.log(this.$store.state.title)},computed:{//展开运算符映射...mapState([count,title])}
})
/script
style scoped
/style
核心概念 - mutations
目标明确vue同样遵循单向数据流。组件不能直接修改仓库的数据掌握mutations的操作流程来修改state数据state数据的修改只能通过mutations
通过 strict:true 开启严格模式检测错误语法 步骤
定义mutations对象对象中存放修改state的方法
const storenew Vuex.Store({//state 状态即数据类似于Vue组件中data/**区别* 1.data是组件自己的数据* state是所有组件共享的数据*/state:{count:101,title:我是大标题},//定义mutationsmutations:{//第一个参数是state属性addCount(state){state.count1;}}
}) 组件中提交调用mutations addCount(){this.$store.commit(addCount);} 传参
目标:掌握mutations传参语法
提交mutation是可以传参数的this.$store.commit(xxx,参数)
提供mutation函数带参数-提交载荷payload提交载荷只有一个参数
const storenew Vuex.Store({//state 状态即数据类似于Vue组件中data/**区别* 1.data是组件自己的数据* state是所有组件共享的数据*/state:{count:101,title:我是大标题},//定义mutationsmutations:{//第一个参数是state属性addCount(state,n){state.count1;}}
}) 页面中提交调用mutation addCount(){this.$store.commit(addCount,10);} 注意mutation参数有且只有一个参数如果需要多个参数包装成一个对象 辅助函数mapMutations
目标掌握辅助函数mapMutations映射方法
mapMutations和mapState很像他是位于mutations中的方法提取出来映射到组件method中 核心概念 - actions
目标明确actions的基础语法处理异步操作
需求一秒之后修改state的count成666
场景发请求
说明mutations 必须是同步的(便于检测数据变化记录调试)
步骤
1提供action方法 actions:{setAsyncCount(context,num){//context相当于store仓库num为额外传参//一秒后给一个数去修改numsetTimeout((){context.commit(changeCount,num)},1000)}}
步骤2页面中dispatch调用 button click$store.dispatch(setAsyncCount,666)修改count/button
辅助函数
mapActions是把位于action中的方法提取出来映射到组件method中 import { mapActions, mapState } from vueximport { mapMutations } from vuex;
export default({methods:{...mapMutations([addCount]),...mapActions([setAsyncCount]),changeInp(e){this.$store.commit(changeTitle,e.target.value)}},等价于setAsyncCountn{this.$store.dispatch(changeCountAction,n)} 核心概念 - getters
目标掌握核心概念getters的基础语法类似计算属性
说明除了state之外有时我们还要从state中派生出一些状态这些状态是依赖state的此时会用到getters
步骤
定义getters //定义gettersgetters:{//getters函数的第一个参数是state//getters函数必须要有返回值filtetList(){return state.list.filtetList(itemitem5)}}, 2. 访问getters 通过store访问getters
{{$store.getters.filterList)}} 通过辅助函数mapGetters映射 computed:{...mapState([count,title]),...mapGetters([filterList])}{{filterList}}
核心概念 - 模块module(进阶语法)
由于VueX使用单例状态树时应用的所有状态会集中到一个比较大的对象当应用变得非常复杂时
store对象就会有可能变得相当臃肿难以维护
模块拆分
user模块 store/modules/user.js
const state{userInfo:{name:Rys,age:20}
}
const mutations{}
const actions{}
const getters{}
export default{state,mutations,actions,getters
}
在store/index.js下配置
const storenew Vuex.Store({ modules:{ user } }
尽管已经分模块了但其实子模块的状态还是会挂到根基本的state中属性名就是模块名 使用模块中的数据
state
直接通过模块名访问 $store.state.模块名.xxx通过mapState映射 默认跟级别的映射 mapState([xxx])mapState(模块名,[xxx]) - 需要开启命名空间
export default{ namespaced:true, state, mutations, actions, getters } ...mapState(user,[userInfo]),
getters
使用模块中 getter 中的数据
直接通过模块名访问 $store.getters[模块名/xxx]通过mapGetters 映射 默认根组件映射 mapGetters([xxx])子模块的映射 mapGetters(模块名,[xxx]) - 需要开启命名空间
mutation
注意默认模块中的mutation和actions会被挂载到全局需要开启命名空间才会挂载在子模块
调用子模块的mutation:
直接通过store 调用 $store.commit(模块名/xxx,额外参数)通过mapMutations映射 默认跟级别映射mapMutation[’xxx‘]子模块的模块mapMutation[模块名,[xxx]] -- 需要开启命名空间
