vuex复习

最新推荐文章于 2024-11-11 09:45:18 发布

Lotus_fragrance

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量509

点赞数

文章标签：前端 javascript vuex vue

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/127035509

版权

#博学谷IT学习技术支持#

一、vuex基础介绍

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    
})
export default store

1.1 state

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中

如何在组件中获取count?

（1）原始形式- 插值表达式

(2) 计算属性 - 将state属性定义在计算属性中

(3) 辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法

1.2 mutations

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  },

如何在组件中调用mutations

(1) 原始形式-$store

(2) 辅助函数 - mapMutations

1.3 actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

 actions: {
  //  获取异步的数据 context表示当前的store的实例 可以通过 context.state 获取状态 也可以通过context.commit 来提交mutations， 也可以 context.diapatch调用其他的action
    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123)
      }, 1000)
    }
 }

(1)原始调用 - $store