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 !
 上一篇
关于实习 关于实习
这是我第一次正式的实习工作,有时候觉得还挺幸运的,能找到一个自己理想中的工作,我还记得我刚开始接触前端的时候,除了每天在网上在资料学习,还有就是在网上搜索前端程序员的一天工作都是在干什么,有一个印象很深的回答:一天 一支烟 一个BUG 完。
2021-05-01
下一篇 
关于ES6 关于ES6
let命令ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 for循环的计数器,就很合适使用let命令。 let在for循环还有一个特别之处,就是设置循环变量的那部分是一个父
2020-09-23
  目录