vuex的学习

Serena_tz

已于 2023-05-04 10:55:10 修改

阅读量69

点赞数

文章标签：学习前端 vue.js vuex

于 2023-05-04 09:45:21 首次发布

原文链接：https://v3.vuex.vuejs.org/

版权

mapState

获取状态，声明计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',

// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
  return state.count + this.localCount
}

})
}

映射的计算属性的名称与 state 的子节点名称相同时

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

mapState 函数返回的是一个对象，将它与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Module

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态