vue教程——13 Vuex

一什么是Vuex？
二 vuex核心组成模块
三 vuex初体验
四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)
五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)
六 modules模块化
七语法糖：对操作大量state、getter、mutations、actions的简写
八重置Vuex的state

一什么是Vuex？

说白了，就是多个页面共同维护一组数据的状态。比如有一组数据dataS； A页面 改变了这组数据，B页面此时也需要监听到这组数据的变化，随之做出自己的处理。

例如，A页面修改了用户名，B页面这个时候也需要监听到用户名的修改并渲染到页面上。以上的例子，我们知道的动作有：A页面改变数据 B页面拿到数据并监听数据，其实这些就是vuex的操作。

二 vuex核心组成模块

State ： 定义了存放的数据。就是上面的dataS
Getter：让组件获取state中的值(dataS)，就是B页面获取值并监听的时候，我们通过这个获取值
Mutation：修改state中的值，就是A页面要修改值，就用这个方法。这个方法里面必须是同步函数
Action：用于提交Mutation，这里可以进行异步操作。说白了就是异步操作以后，调用Mutation，修改State中的值。
Module：当页面需要维护的数据太多了，写一个页面里面维护很麻烦，通过Module可以模块化上面四个属性，模块化后，可以根据数据的用处命名。

三 vuex初体验

const store = new Vuex.Store({state:{//存的数据},getters:{//获取state中的值},mutations: {//同步操作，改state中的值},actions: {//异步，提交mutations，来改state中的值},//模块化，让每个模块有自己的state,getters，mutations,actionsmodules: {Ma: moduleA,Mb: moduleB,//...}
});

四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)

   // 页面B<div> {{stateName}} </div>computed: {stateName () {//1.直接获取store中的值return store.state.username;// 2.使用getter获取(常用)return store.getters.username;}}

既然store.state.username 能获取，那为啥用store.getters.username呢？
getter相当于在state.username 到 B页面获取之间加一层，这一层想干啥干啥

一般来说我们用getter就是为了取数据，啥也不做。

const store = new Vuex.Store({state:{username:'',},getters:{usernameGetter: (state)=>{ retrun  state.username + 'Vuex牛逼'}},mutations: {//同步操作，改state中的值},actions: {//异步，提交mutations，来改state中的值},});

五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)

// A页面
<div @click='changeName'> 修改名字 </div>changeName(){store.commit('SET_USERNAME', 'FLX');
}const store = new Vuex.Store({state:{username:'',},getters:{username: (state)=>{ retrun  state.username}// 或者username: state => state.username},mutations: {SET_USERNAME(state,username){state.username = username}},actions: {//异步，提交mutations，来改state中的值},});

但是一般usename是后端返回的，那这个异步操作应该怎么写呢？

// A页面
<div @click='changeName'> 修改名字 </div>changeName(){store.dispatch('getUserName')
}const store = new Vuex.Store({state:{username:'',},getters:{username: (state)=>{ retrun  state.username}// 或者username: state => state.username},mutations: {SET_USERNAME(state,username){state.username = username}},actions: {// 1.异步操作 api，用户获取后端返回的username// 2.commit提交给mutationsgetUserName({ commit }){getUser().then(resp=>{commit('SET_USERNAME', data.username)})}},});

六 modules模块化

const moduleA = {state: {...},getters: {...},mutations: {....},actions: {...}
}const moduleB = {state: {...},getters: {...},mutations: {....},actions: {...}
}const store = new Vuex.Store({modules: {Ma: moduleA,Mb: moduleB}
});

七语法糖：对操作大量state、getter、mutations、actions的简写

MapState

当我们需要取计算属性多个值的时候，得写多个compute，那有没有简单的写法呢？有

const store = new Vuex.Store({state:{username:'',age:'',sex:''},getters:{},mutations: {},actions: {},});// 如果不用mapState
<div>{{stateName}}</div>
<div>{{stateAge}}</div>
<div>{{stateSex}}</div>computed: {stateName () {//1.直接获取store中的值return store.state.username;},stateAge () {//1.直接获取store中的值return store.state.age;},stateSex () {//1.直接获取store中的值return store.state.sex;}}  // 如果用了mapstate
/*mapstate接收两个参数：1 数组：直接从state中取，渲染页面也用这个名字2 对象，比上面数组多一个优点，给这个被computed监听的对象起个名字
*/// 数组形式
<div>{{username}}</div>
<div>{{age}}</div>
<div>{{sex}}</div>computed: {// 语法糖，跟上面写法其实一致。这个是简写。...mapState(['username','age','sex'])}  // 对象形式
<div>{{stateName}}</div>
<div>{{stateAge}}</div>
<div>{{stateSex}}</div>computed: {// 语法糖，简写。...mapState({stateName:state=>state.username,stateAge:state=>state.age,stateSex:state=>state.sex})}

mapGetters

// 与mapState用法一致// 假设这些东西，getter中已经定义好了computed: {...mapGetters(['username','age','sex'])// 语法糖，简写。...mapState({stateName:state=>state.username,stateAge:state=>state.age,stateSex:state=>state.sex})}

mapMutaions

如果一个页面中需要执行多个mutations方法，这个时候可以用mapMutations方便管理与使用

const store = new Vuex.Store({state:{username:'',age:'',sex:''},getters:{},mutations: {SET_USERNAME(state,username){state.username = username},SET_AGE(state,age){state.age = age},SET_SEX(state,sex){state.sex = sex}},actions: {},
});// 如果没有使用mapMutations
<div @click='changeName'> 修改名字 </div>
<div @click='changeAge'> 修改年龄 </div>
<div @click='changeSex'> 修改性别 </div>changeName(){store.commit('SET_USERNAME', 'CXY');
}changeAge(){store.commit('SET_AGE', 24);
}changeSex(){store.commit('SET_SEX', '男');
}// 使用了mapMutations
/*mapMutations同样接收两个参数：1 数组：与state保持一致2 对象，修改方法的名字
*/
methonds:{...mapMutations(['SET_USERNAME','SET_AGE','SET_SEX'])...mapMutations({setusername:'SET_USERNAME',setAge:'SET_AGE',setSex:'SET_SEX'})
}// 这样的话，直接调用即可

mapActions

// 与上面一致// 加入actions中定义了这些
methonds:{...mapActions(['setusername','setAge','setSex'])...mapActions({msetusername:'setusername',msetAge:'setAge',msetSex:'setSex'})
}

八重置Vuex的state

重置state中的值的方法：
1.写一个函数getDefaultState
2.Object.assign(state, getDefaultState()) 拷贝一下对象

这个函数有两个用处：
1 初始化的使用
2 拷贝的时候用

const getDefaultState = () => {return {username:'',age:'',sex:''}
}// 初始化的时候
const state = getDefaultState()// 重置用户的时候用
const mutations = {RESET_USER(state) {Object.assign(state, getDefaultState())}
}const actions = {logOut ({ commit }) {commit('RESET_USER')},
}export default {state,getters: {},actions,mutations
}

vue教程——13 Vuex相关推荐

视频教程-德国Vue.js2终极开发教程（含Vue路由和Vuex）-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
德国Vue.js2终极开发教程（含Vue路由和Vuex）-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习课程介绍新手入门现代前端开发的不二选择课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...
vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
vuex构建vue项目如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
ChatGPT AI生成的VUE教程博客大纲
以下内容为AI生成 , 仅供参考学习 Vue教程博客的大纲 1. Vue.js 简介:了解 Vue.js 的概念和特点 2. 安装和配置:如何在你的项目中使用 Vue.js 3.Vue 模板语法:学习 ...
Vue教程_基础(一)
目录章节地址 Vue教程_tips https://blog.csdn.net/weixin_46349544/article/details/124082287 Vue教程_基础(一) http ...
2019最新《后盾网Vue教程向军Vue基础教程共86课》
1.向军老师Vue开发宝典-Vue.js介绍.mp4 2.向军老师Vue开发宝典-创建第一个应用.mp4 3.向军老师Vue开发宝典-操作元素属性.mp4 4.向军老师Vue开发宝典-Mustache ...
Python-EEG工具库MNE中文教程(13)-“bad“通道介绍
目录标记坏频道/标记不良通道(marking bad channels) 本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 .QQ交流群:903290195 本教程主要介绍手动标记坏通道以及 ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
黑马lavarel教程---13、分页
黑马lavarel教程---13.分页一.总结一句话总结: - lavarel里面的分页操作和tp里面的分页操作几乎是一模一样的 - 控制器:$data=Lesson::paginate(2); ...

vue教程——13 Vuex

vue教程——13 Vuex

一什么是Vuex？

二 vuex核心组成模块

三 vuex初体验

四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)

五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)

六 modules模块化

七语法糖：对操作大量state、getter、mutations、actions的简写

八重置Vuex的state

vue教程——13 Vuex相关推荐

最新文章

热门文章

vue教程——13 Vuex

vue教程——13 Vuex

一 什么是Vuex？

二 vuex核心组成模块

三 vuex初体验

四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)

五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)

六 modules模块化

七 语法糖 ：对操作大量state、getter、mutations、actions的简写

八 重置Vuex的state

vue教程——13 Vuex相关推荐

最新文章

热门文章

一什么是Vuex？

七语法糖：对操作大量state、getter、mutations、actions的简写

八重置Vuex的state