Vuex

Vuex作用

用于保存全局共享的数据

state

• 用于存放全局共享的数据

• 用法

  new Vuex.Store({
      state: {
          属性名: 属性值
      }
  })
  

• 在组件里面 访问 state 里面的数据

  • 第一种：this.$store.state.属性名

  • 第二种：需要在 组件里面 使用 按需导入 得到 mapState 将mapState 映射为当前组件的计算属性

    import { mapState } from 'vuex'
    ...mapState(['属性名'])
    

mutation

• 用于修改 state 里面的数据

• 语法

  mutations: {
      函数名(state, payload) {
          // state 就代表了 state 对象
          // state.属性名  可以访问 state 对象里面的属性
          state.属性名 = payload
      }
  }
  

• 在组件里面 访问

  0. 使用 this.$store.commit('函数名', 参数)

  1. 需要在 组件里面 使用 按需导入 得到 mapMutations 映射为当前组件的 methods

     import { mapMutations } from 'vuex'
     ...mapMutations(['函数名'])
     

actions

• 作用：用于发送异步请求

• 语法

  actions: {
      函数名(context, payload) {
          // context 表示 new Vuex.Store 实例对象
          context.commit('mutations里面的函数', paload)
      }
  }
  

• 在组件里面访问

  0. this.$store.dispatch('函数名', 参数)

  1. 需要在 组件里面 使用 按需导入 得到 mapActions 映射为当前组件的 methods

     import { mapActions   } from 'vuex'
     ...mapActions  (['函数名'])
     

getters

• 作用：相当于 组件 内部的 计算属性

• 语法

  getters: {
      函数名(state) {
          // state 就是 代表 state 对象
      }
  }
  

• 在组件里面访问

  0. this.$store.getters.属性

  1. 需要在 组件里面 使用 按需导入 得到 mapGetters 映射为当前组件的计算属性

     import { mapGetters     } from 'vuex'
     ...mapGetters (['函数名'])
     

modules

• 作用：用于将 vuex 划分成 模块

• 语法：

  • 创建一个 xxxx.js 文件 文件里面 有4个核心成员

    export default {
        namespaced: true,
        state: () => ({}),
        mutations: {},
        actions: {},
        getters: {}
    }
    

• 在 index.js 里面 导入

  import 模块对象 from '模块的路径'
  new Vuex.Store({
      modules: {
          模块名: 模块对象
      }
  })
  

• 开启了 命名空间 以后 访问 模块里面的成员

• 推荐使用 辅助函数的方法

  • 访问 state 里面 ...mapState('模块名', ['属性名'])

  • 访问 mutations 里面的 函数 ...mapMutations('模块名', ['函数名'])

    • this.$store.commit('模块名/函数名')

  • 访问 actions 里面的函数 ...mapActions('模块名', ['函数名'])

    • this.$store.dispatch('模块名/函数名')

  • 访问 getters 里面的计算属性 ...mapGetters('模块名', ['函数名'])