vuex作为各个组件的中转站,在组件间通信过程中发挥了很大的作用,下面我就通过使用uniapp使用vuex来去整个各个模块的数据,步骤如下:
建立store文件夹,并编写store文件
export default {
namespaced: true,
state: {
address: {},
},
mutations: {
updateAddress(state, address) {
state.address = address;
uni.setStorageSync('address', JSON.stringify(state.address))
}
},
getters: {
addstr(state) {
return state.address.address + state.address.name;
}
}
}
namespace=true可以使模块具有独立的命名空间,使得避免与其他模块产生冲突。
state层存储数据
mutation可以直接操作state层的数据
action可以处理组件传递过来的数据,处理复杂逻辑
getters相当于computed层,可以对state数据做一些修饰
并将各个模块暴露出去
编写store.js文件
import Vue from 'vue';
import Vuex from 'vuex';
import moduleCart from './cart.js';
import moduleUser from './user.js'
import modulelogin from './login.js'
Vue.use(Vuex);
const store =new Vuex.Store({
modules:{
m_cart:moduleCart,
m_user:moduleUser,
m_login:modulelogin
}
});
export default store;
将模块统一管理并统一命名
注册值vue中
const app = new Vue({
...App,
store,
各个组件该如何调用呢?
操作state,直接传至mutation
this.$store.commit('m_login/changeloginstates', true);
模块名/所要调用的方法
传送至action做处理
this.$store.dispatch('m_login/changeloginstates', data)
那数据使直接传递到action还是直接传到mutation呢?
直接发送到 Mutation 的情况:
-
简单的同步状态修改:如果要进行的状态修改是一个简单的同步操作,不需要进行异步操作或处理复杂逻辑,那么可以直接发送到 Mutation。
-
快速响应:对于需要快速响应的状态修改,可以直接发送到 Mutation。由于 Mutation 是同步操作,可以立即修改状态,使得组件可以快速获得更新后的状态。
-
单个状态的修改:如果只需要修改一个状态属性,而不需要进行其他操作或请求,那么可以直接发送到 Mutation。
发送到 Action(通过 dispatch)的情况:
-
异步操作:如果需要进行异步操作,例如发送网络请求、定时器操作、读取本地存储等,应该发送到 Action。在 Action 中可以包含异步代码,并在异步操作完成后通过触发 Mutation 来修改状态。
-
复杂业务逻辑:如果需要处理复杂的业务逻辑、多个状态的修改或条件判断等,可以将这些逻辑封装在 Action 中,并在 Action 中触发相应的 Mutation。
-
批量状态的修改:如果需要修改多个状态属性,或者需要根据某些条件来修改状态,可以将这些逻辑放在 Action 中,并在 Action 中触发相应的 Mutation。
-
异步请求和状态修改的组合:如果需要先发送异步请求获取数据,然后根据获取的数据修改状态,可以通过 Action 发送异步请求,并在请求成功后触发 Mutation 来修改状态。
获取vueX中的数据
使用getter获取
this.$store.getters['m_login/getLoginStatus'];
直接获取state中的数据
this.$store.state.m_login.loginstatus
vuex所提供的辅助函数
mapState
、mapActions
和 mapMutations
是 Vuex 提供的辅助函数,用于简化在组件中使用状态、操作和突变的过程。它们可以帮助你将 Vuex 的相关内容映射到组件的计算属性、方法或直接绑定到组件的选项中。
下面是它们的用法和示例:
-
mapState
: 将 Vuex 的状态映射到组件的计算属性。javascript
...mapState('m_login',['profile','loginstatus']),
import { mapState } from 'vuex' export default { computed: { ...mapState(['count']) // 将 state 中的 'count' 映射为组件的计算属性 } } ``` 上述示例中,`count` 是 Vuex store 中的状态,通过 `mapState` 辅助函数,我们将其映射为组件的计算属性。 在组件中可以直接使用 `this.count` 来访问该计算属性。
-
mapActions
: 将 Vuex 的操作映射到组件的方法。javascript
import { mapActions } from 'vuex' export default { methods: { ...mapActions(['increment']) // 将 'increment' 操作映射为组件的方法 } } ``` 上述示例中,`increment` 是 Vuex store 中的操作,通过 `mapActions` 辅助函数,我们将其映射为组件的方法。 在组件中可以直接使用 `this.increment()` 来调用该方法。
-
mapMutations
: 将 Vuex 的突变映射到组件的方法。javascript
import { mapMutations } from 'vuex' export default { methods: { ...mapMutations(['SET_USER']) // 将 'SET_USER' 突变映射为组件的方法 } } ``` 上述示例中,`SET_USER` 是 Vuex store 中的突变,通过 `mapMutations` 辅助函数,我们将其映射为组件的方法。 在组件中可以直接使用 `this.SET_USER(payload)` 来调用该方法,并传递 `payload` 参数。
通过使用这些辅助函数,可以简化在组件中使用 Vuex 的过程,避免了手动的引入和映射,使代码更加简洁和易读。请注意,这些辅助函数可以接收一个字符串数组,用于指定需要映射的状态、操作或突变,也可以传递一个对象来指定自定义的名称。