vuex的基本使用

Posted 2023-03-17

参考技术A 作用 ：

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

组成：

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' )