vuex复习

目录

一、vuex基础介绍

1.1 state

1.2 mutations 

1.3 actions 

1.4 getters 

1.5 Module

---

#博学谷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

 

 

 

(2) 辅助函数 -mapActions 

 

1.4 getters 

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到

getters 

 

 1.5 Module

 

 

 

模块化中的命名空间 

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个

模块能够对同一 mutation 或 action 作出响应。 

这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区

分，都可以直接通过全局的方式调用

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置