什么是vuex? | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储,管理应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 |
为什么用vuex,解决了什么问题? | (1)行统一的状态管理,解决不同组件共享数据的问题。 (2)不同视图需要变更同一状态的问题。 (3)使用vuex之后,状态变化更加清晰。 |
怎么用? | 1、安装引入 npm install vuex --save 2、注册到vue中 3、实例化vuex的store const store = new Vuex.Store({ state: { count: 0, title:'vuex中的title' }, mutations: { increment(state,count) { state.count=count } } }) 4、挂载在vue实例上 5、在组件中就可以通过this.$store对vuex进行操作 |
核心概念 |
组件中去取state的值: 1、通过this.$store.state 2、可以通过计算属性取得,mapState辅助函数,可以简化操作 2、getters:对state中的数据进行初加工(派生) 取getters中的值: 1、通过this.$store.getters 2、通过计算属性取,getters也有辅助函数mapGetters, 用法和mapState一致。 3、mutations:修改state中的值,我们state每次变化,都应该由mutation去修改 调用mutations 1、this.$store.commit(‘mutation类型(函数名)’,“参数,参数一般是对象形式”) 2、his.$store.commit({type:‘mutation类型(函数名)’},…其他参数) mutation函数必须是同步的。 4、actions action类似于mutation 触发action 1、this.$store.dispatch(‘action名字’,‘参数’) 2、this.$store.dispatch({type:‘action类型(函数名)’},…其他参数) 5、modules 1、由于使用单一的状态树,项目中的状态会集中在一起,导致难以维护,这个时候可以通过module对store进行拆分。 2、使用module之后,每个模块都有自己的state、mutation等内容,方便维护 |
在vue中谈一谈对Vuex的理解
最新推荐文章于 2024-04-08 22:40:17 发布