Fram/Lib

VUEX的基本使用

字数:2064    阅读时间:11min
阅读量:7851

Vuex是Vue.js应用程序开发的状态管理模式,组件间共享的数据可以存放到这里(换句话说就是存在vuex里的数据任何组件都可以用)。它是响应式的,一个地方修改其他地方也跟着改变;注意我们在改变数据状态的时候最好不要直接修改,而是要通过this.$store.commit()方法提交到mutation在mutation里修改,这样修改的数据才能配合devtools跟踪到数据变化;

基本安装使用

  1. 引入vuex /*安装vuex:npm install vuex --save;创建store文件夹,分别创建index.js(配置vuex)和actions.js,mutations.js,getters.js,modules.js(分别用来处理不同状态)*/
    1. 引入依赖: import Vuex from 'vuex' (引入处理状态import mutations from './mutations.js'
    2. 安装vuexVue.use(Vuex)
    3. 创建实例: const store = new Vuex.Store({state:{},mutations:{},actions:{},getters:{},modules:{}});建议一个项目只创建一个store这样方便后期维护
    4. 导出实例:export default store
  2. 添加全局属性 /*在main.js中为vue添加store全局属性*/
    1. main.js中引入index.jsstore模块:import store from './store/index.js'
    2. store添加到vue全局属性里:new Vue({store,render: h =>h(App)}).$mount('#app')。(为什么要添加到这里。个人认为,store里的数据需要在挂载的时候用到,所以要添加到挂在前;还有一种原因可能是store相当于是一个没有DOM(没有el属性)的实例,需要使用vm.$mount()方法手动挂载)

vuex的核心就是一个store(仓库),它相当于是一个容器,里面包含有五大核心:state,action,mutation,getter,modules。

State

state属性就是用来存放状态的;vuex建议只有一个状态源,这样有利于管理和维护;一开始就定义在state里的属性都会被添加到vue的响应式里,都可以做到响应式

state辅助函数mapState(): 当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

Getter

Getter 就是处理属性,在数据需要处理的时候,在这里处理好再丢出去;可以看作是store的一个计算属性(相当于vue的computed属性)

getter辅助函数mapGetters():只是将 store 中的 getter 里的属性映射到局部计算属性中

Mutation

vuex改变状态都要通过commit触发mutations来改变,这样devtools才能跟踪到每次修改的状态,以便后期维护;mutation类似于事件,写法:typeName:回调函数;只能是同步

mutation辅助函数mapMutations(): 当组件中有多个提交mutation触发state改变时,代码会显得重复冗余,mapMutations()就可以很好的解决这个问题

Action

有异步操作时,需要先dispath提交到actions里,然后再commit到mutations中触发数据更新,以便跟踪状态

action辅助函数mapActions():跟mapState、mapGetters...一样,减少代码重复和冗余

Module

当state有太多的时候可以抽离成不同的模块

vuex的工作流程

vuex的工作流程
  1. 在组件里通过dispath触发actions来提交异步修改数据的操作
  2. actions中通过commit触发mutations来修改数据
  3. mutations接收到commit的提交,就会通过mutate修改state状态 (如果操作不是异步可以直接通过commit将改变数据的操作提交给mutations
  4. 最后由store触发每一个调用它的组件
野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

发表评论

邮箱地址不会被公开。

相关推荐