先说一下Vuex到底是什么？
Vuex 是一个专门为 vue.js 应用程序开发的状态管理模式喜欢看代码学习的的可直接下载下方 Demo这个状态我们可以理解为在 data 中的属性，需要共享给其他组件使用的部分
也就是说，我们需要共享的数据，可以使用 vuex 进行统一集中式的管理
https://gitee.com/jiangliyue/...Vuex中的五种基本对象
state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为 state 的计算属性，我们在组件中使用 $store.getters.fun() 调用
mutations：修改状态，并且是同步的。在组件中使用 $store.commit("操作名",params) 调用
actions：异步操作。在组件中使用 $store.dispatch("操作名") 调用
modules：store 的子模块，为了开发大型项目，方便状态管理而使用的，使用方法和上面一样
// 常见vuex初始化配置
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: "hello ",
username: ""
},
getters: {},
mutations: {},
actions: {},
modules: {}
})
在项目中使用 Vuex
将上面初始化的 Vuex 对象引入到 main.js 文件中
// 引入store
import store from "@/store/index"
new Vue({
store,
render: h => h(App)
}).$mount("#app")
在组件中使用
现在我们已经可以使用 Vuex 中的 state 了，接下来我们看看如何操作这个属性{{$store.state.msg}}
Vuex 提供了 mutations 和 actions 两种方法来操作 state
mutations（同步操作）
定义 mutations 对象里的方法，方法里面的参数，第一个默认为 state，第二个为自定义传入参数。
/**
* mutations 里面放置的是我们操作state对象属性的方法
*/
const mutations = {
setMsg(state, name) {
state.msg = "hellow" + name
}
}
export default new Vuex.Store({
state,
mutations
})
组件中使用 Vuex 提供的 commit 方法调用 mutations 中我们自定义的方法
created() {
this.setSayMsg("your Name")
},
methods: {
setSayMsg(name) {
this.$store.commit("setMsg",name)
}
}
效果如何大家自行实验哈~
actions（异步操作）
定义 actions 对象里的方法，方法里面的参数，第一个是context，它是一个和 store 对象具有相同对象属性的参数，第二个为自定义传入参数。
通常当我们需要修改多个状态或者说调用多个 mutations 里的方法时会用到 actions
/**
* actions 里面放置的是我们调用store对象的方法
*/
const actions = {
// 常规写法
// actionsSetMsg(context, name) {
// context.commit("setMsg", name)
// }
// 简化写法
actionsSetMsg({ commit }, name) {
commit("setMsg", name)
}
}
export default new Vuex.Store({
state,
actions
})
组件中使用 Vuex 提供的 dispatch 方法调用 actions 中我们自定义的方法
created() {
this.actionsSetSayMsg("your Name")
},
methods: {
actionsSetSayMsg(name) {
this.$store.dispatch("actionsSetMsg",name)
}
}
最后是 getters，我们一般使用 getters 来获取我们的 state，因为它算是 state 的一个计算属性，相当于实时监听状态变化
定义 getters 对象里的方法
const getters = {
getMsg(state) {
return state.msg
}
}
export default new Vuex.Store({
state,
getters
})
组件中使用
computed: {
msg() {
return this.$store.getters.getMsg
}
}
看到这里如果上面的用法都能理解，那恭喜你的 Vuex 已经学的很好了！
接下来的是官方提供给我们使用 Vuex 的一些小技巧mapState
mapMutations
mapActions
mapGetters
需要明确的是，这些方法只是方便我们书写，重点还是上面的基础部分
这部分用到了 es6 的扩展运算符，不熟悉的同学自行百度吧，还是蛮有用的
用法还是看下面代码直接点，主要记住2点引入都用到扩展运算符，即3个点 "..." ，方式则为下面 2种模板任选一种
...mapState({
你在该页面想用的变量名: "你state对象里定义的属性或方法名"
})
// 或者传入一个数组,此时当前组件调用的变量名与state中定义的方法名一致
...mapState(["你state对象里定义的属性或方法名"])
Demo Git 地址另外记住 ...mapState({...}) 和 ...mapGetters({...}) 放在 computed 计算属性里， ...mapMutations({...}) 和 ...mapActions({...})放在methods 方法属性里就可以了
https://gitee.com/jiangliyue/...
Msg: {{ $store.state.msg }}
Your Name: {{ username }}
mapState Your Name: {{ mapStateName }}
mapGetters Your Name: {{ mapGettersName }}
User Name:
最后，如果大家发现有什么问题，或者错误的地方，欢迎留言交流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105341.html
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：优点按需加载可以写中路径也可以动态加以后默认就是严格模式，默认严格模式完参考视频资料经典入门到进阶 上一篇：ES6入门到进阶（一）：let、解构赋值、字符串模板、函数 一、循环 ES5里面新增一些东西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...
摘要：进阶的知识的话就是响应式这一块了，一套代码能适配手机是初级前端工程师的进阶，在北京工资一般在左右。进阶的知识应该是这一块了，当然并不难，了解怎么与后台交互是学习的关键点，在北京的工资一般在左右。 web前端？如果你是一名web前端工程师，那么你将感到幸运，从之前的默默无闻，到后来的给后台工程师打下手，再到巅峰一时。web前端可谓是当下最火的职位之一。 showImg(https://s...
阅读 1382·2021-09-02 09:53
阅读 2656·2021-07-29 13:50
阅读 1694·2019-08-30 11:07
阅读 1553·2019-08-30 11:00
阅读 1436·2019-08-29 14:00
阅读 1785·2019-08-29 12:52
阅读 2542·2019-08-29 11:11
阅读 3399·2019-08-26 12:23
