vue中使用vuex(超详细,初学者易懂)

1.vuex的好处

集中管理共享数据

高效实现组件之间的数据共享

vuex的数据都是响应式的,能够实施保持数据与页面的实施更新和同步

2.vuex和localStorage的区别

  • vuex是存储在内存中,localStroage存储数据在浏览器本地存储的

  • vuex的数据是瞬时的,localStroage是持久的,是不容易丢失的

  • vuex的数据是响应式的,localStorage中的数据不是响应式的

  • vuex直接操作JS的对象无需转换,localStorage存储数据要转成JSON,取数据要将JSON转成JS对

  • vuex还能完成异步操作(网络请求的),localStorage仅仅只是一个保存数据和获取数据

  • vuex中数据按照业务进行模块化,localStorage管理数据没有模块化

  • 单页面应用的程序组件数据共享使用使用状态机(vuex),localStorage适合多页面数据的共享

Vuex的仓库配置:

import  Vue  from  'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{},
    getters:{},
    mutatinos:{},
    actions:{},
    modules:{}
})

export default store
在vue的入口文件把store仓库挂载上去
Vuex的五大属性:

state是仓库中的状态数据

mutaions是里面放的是同步的方法,用来修改state里面的数据

actions是里面放的是异步的方法,里面可以进行异步的操作,用来修改state里面的数据,但是它本质上还是需要调用mutations方法修改的state的数据

getters选项中专门是依赖于state数据,产生新的数据,就相当于组件中计算属性

modules主要是进行模块化管理的

Vuex的语法:

state:

在组件中访问state数据this.$store.state.数据名,如果在标签中直接使用该数据不用加this。

muations:

在mutaions中定义方法 : 方法名(state,payolad){} ,参数一代表state里面的数据,参数二表达的是外部传入的数据,数据来源于组件或者actions里面

如果在组件中需要调用mutations方法的话用到this.$store.commit(’‘方法名”,传递的参数)用来调用同步的方法

同时记住它是不支持异步操作的

actions:

在actions中定义方法:方法名(context,payload){},参数一代表的是context上下文作用域,通过context.commit方法可以调用mutaions里面的方法来修改state数据

如果在组件中需要调用actions方法的话需要用到this.$store.dispatch(’方法名‘,传递的参数),它是异步操作的

getters:

在getters中定义getter 方法名(state){

return 返回的数据

}

在组件中调用的语法:this.$store.getters.getter方法名称 ,在组件中访问: this.$store.getters.totalPrice

Vuex的辅助函数

vuex中提供了以下四种常用方法

  • mapState():这个方法就是将状态机仓库中的state数据映射成组件内数据

  • mapMutatations():将状态机仓库中mutations选项中方法映射组件的方法

  • mapActions():将状态机仓库中actions选项中的方法映射成组件的方法

  • mapGetters():将状态机仓库中getters选项中的方法映射成组件内的计算属性

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值