vuex的基本使用

发布网友发布时间：2022-09-09 05:31

共1个回答

热心网友时间：2024-10-21 03:19

作用：

它采用集中式存储管理应用的所有组件的状态。（统一管理所有组件中公用的数据）

组成：

state：管理所有的状态（数据）

getter：state 的计算属性

mutations：用来操作 state

用法：

1.0 定义

// 在 store/index.js 中

export default new Vuex.Store ({state:{userInfo:''}})

2.0 使用

// 在 .vue(组件) 中

// // 取值

this.$store.state.userInfo

// // 赋值

this.$store.state.userInfo={}

总结：

在 vuex 中，如果要给 vuex 中的数据赋值，不能直接得到 state 去赋值，这样不配合 vuex 设计规范

vuex - mapState 基本使用

它是 vuex 中 state 对应的一个辅助函数

mapState：可以用来简化 vuex 中 state 中属性的使用

步骤：

导入

import { mapState } from 'vuex'

定义

computed:{...mapState(["state中的属性名"])}

使用

this.state中的属性名 === this.$store.state.state中的属性名

vuex - mutations 的使用

在 vuex 中，如果要给 state 中的属性赋值，建议大家借助 mutation 来赋值

步骤：

1.0 在 mutations 中定义赋值方法

// 在 store/index.js 中

export default new Vuex.Store({

    state: { userInfo: ' ' },

    mutations: { setUserInfo ( state, payload ) {

            state.userInfo = payload

    }

}})

2.0 在组件中调用方法

// 在 .vue(组件) 中

// 取值

this.$store.state.userInfo

// 赋值

this.$store.commit('setUserInfo', data)

vuex - mapMutaions 基本使用

mapMutaions ：可能用来简化 vuex 中的 mutations 中方法的调用

步骤：

导入 mapMutations

import { mapMutaions } from 'vuex'

定义方法：

methods:{...mapMutations(['setUserInfo'])}

使用方法：

this.setUserInfo('abc')

总结：

vuex：

state：管理状态

取值：

this.$store.state.xxx

...mapState(['xxx']) 或者 ...mapState({ myname: 'xxx' })

mutaions

取值：

this.$store.commit('xxx', payload)

...mapMutations(['xxx']) 或者 ...mapMutations({ myname: 'xxx' })