vuex的五个属性是：1、state属性，用来存储变量；2、getters属性，相当于state的计算属性；3、mutations属性，用于提交更新数据；4、actions属性；5、modules属性，用于模块化vuex。
推荐：《vue教程》
vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。
Vuex有五个核心概念：
立即学习“前端免费学习笔记（深入）”；
state,getters,mutations,actions,modules。
1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
Vuex的用法：
新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js
在项目的main.js中引入 import store from ‘./store’
在store文件下的index.js中引入
import Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'import global from './modules/global'import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({ modules: { user }, getters})export default store 在store文件下的getters.js中引入const getters = { self: state => state.user.self, token: state => state.user.token, currentCommunity: (state, getters) => { let cid = getters.currentCommunityId return getters.communities.filter(item => { return item.communityId === cid }) }}export default getters 在modules文件下的user.js写代码const user = { state:{ self: null, token: '', }, mutations:{ SET_SELF: (state, self) => { state.self = self }, SET_TOKEN: (state, token) => { state.token = token } }, actions:{ login ({ commit }, res) { commit('SET_SELF', res.self) commit('SET_TOKEN', res.token } }export default user
登录后复制
使用下面这两种方法存储数据：
dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值) commit：同步操作，写法：this.$store.commit('mutations方法名',值)
登录后复制
以上就是vuex的五个属性是什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3022110.html
