Vuex


Vuex是一个全局数据管理的一种机制,可以方便的实现数据的共享

使用Vuex管理数据的好处

A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护
B.能够高效的实现组件之间的数据共享,提高开发效率
C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新

使用Vuex只需要在创建项目配置的时候选上vuwx即可,会自动生成以下页面

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {}
})

state

提供唯一的公共数据源,所有共享的数据都要统一放在storestate中存储

    state: {
        user: JSON.parse(window.localStorage.getItem('user'))
    }

在组件中访问State的方式:
1)this.$store.state.全局数据名称 :this.$store.state.count
2).先按需导入mapState函数:import { mapState } from 'vuex'
然后数据映射为计算属性:computed:{ ...mapState(['全局数据名称']) }

mutations

用于修改$store中的数据

 mutations: {
        setUser(state, data) {
            //第一个形参永远都是state也就是$state对象
            //第二个形参是调用setUser时传递的参数
            state.user = data

            //为了数据持久化,把数据放在本地
            window.localStorage.setItem('user', JSON.stringify(state.user))
        }

在组件中访问mutations方法

      //调用函数名,传递参数
       this.$store.commit('setUser',data.data)
        import { mapMutations } from 'vuex'
        methods:{
          ...mapMutations(['add'])
        }

action

mutations中不能编写异步的代码,会导致vue调试器的显示出错。
vuex中我们可以使用Action来执行异步操作。

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

在组件中访问action方法

methods:{
  AddAsync(){
    this.$store.dispatch('addAsync',5)
  }
}
import { mapActions } from 'vuex'
methods:{
  ...mapMutations(['subAsync'])
}

getter

getter用于对store中的数据进行加工处理形成新的数据
它只会包装store中保存的数据,并不会修改store中保存的数据,当store中的数据发生变化时,getter生成的内容也会随之变化

  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为:'+state.count;
    }
  }

在组件中访问getter方法

{{$store.getters.showNum}}
import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

文章作者: XiaoQi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoQi !
 本篇
Vuex Vuex
Vuex是一个全局数据管理的一种机制,可以方便的实现数据的共享 使用Vuex管理数据的好处A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,
2020-09-28
下一篇 
超级简历一面 超级简历一面
找到数组中符合条件的数findfind方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
2020-09-23
  目录