vuex辅助函数写法
时间: 2023-11-01 20:00:41 浏览: 80
vuex辅助函数的写法可以通过使用`mapState`、`mapMutations`、`mapActions`和`mapGetters`等方法来简化代码。这些方法可以将store中的状态、mutations、actions和getters映射到组件的计算属性或者方法中,以便在组件中直接使用。
具体的写法如下所示:
1. 使用`mapState`可以将store中的状态映射为组件的计算属性。
```javascript
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['name', 'age'])
}
}
```
2. 使用`mapMutations`可以将store中的mutations映射为组件的方法。
```javascript
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['updateName', 'updateAge'])
}
}
```
3. 使用`mapActions`可以将store中的actions映射为组件的方法。
```javascript
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['setName', 'setAge'])
}
}
```
4. 使用`mapGetters`可以将store中的getters映射为组件的计算属性。
```javascript
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['fullName', 'isAdult'])
}
}
```
这样,你可以在组件中直接使用映射后的计算属性和方法,而不需要通过`this.$store.xxx`来访问。
阅读全文