uniapp使用vuex整合各个模块

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 的情况：

1. 简单的同步状态修改：如果要进行的状态修改是一个简单的同步操作，不需要进行异步操作或处理复杂逻辑，那么可以直接发送到 Mutation。

2. 快速响应：对于需要快速响应的状态修改，可以直接发送到 Mutation。由于 Mutation 是同步操作，可以立即修改状态，使得组件可以快速获得更新后的状态。

3. 单个状态的修改：如果只需要修改一个状态属性，而不需要进行其他操作或请求，那么可以直接发送到 Mutation。

发送到 Action（通过 dispatch）的情况：

1. 异步操作：如果需要进行异步操作，例如发送网络请求、定时器操作、读取本地存储等，应该发送到 Action。在 Action 中可以包含异步代码，并在异步操作完成后通过触发 Mutation 来修改状态。

2. 复杂业务逻辑：如果需要处理复杂的业务逻辑、多个状态的修改或条件判断等，可以将这些逻辑封装在 Action 中，并在 Action 中触发相应的 Mutation。

3. 批量状态的修改：如果需要修改多个状态属性，或者需要根据某些条件来修改状态，可以将这些逻辑放在 Action 中，并在 Action 中触发相应的 Mutation。

4. 异步请求和状态修改的组合：如果需要先发送异步请求获取数据，然后根据获取的数据修改状态，可以通过 Action 发送异步请求，并在请求成功后触发 Mutation 来修改状态。

 获取vueX中的数据

使用getter获取

 this.$store.getters['m_login/getLoginStatus'];

直接获取state中的数据

this.$store.state.m_login.loginstatus

vuex所提供的辅助函数

mapState、mapActions 和 mapMutations 是 Vuex 提供的辅助函数，用于简化在组件中使用状态、操作和突变的过程。它们可以帮助你将 Vuex 的相关内容映射到组件的计算属性、方法或直接绑定到组件的选项中。

下面是它们的用法和示例：

1. 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` 来访问该计算属性。
   
   

2. mapActions: 将 Vuex 的操作映射到组件的方法。

   javascript

    

   import { mapActions } from 'vuex'
   
   export default {
     methods: {
       ...mapActions(['increment']) // 将 'increment' 操作映射为组件的方法
     }
   }
   ```
   
   上述示例中，`increment` 是 Vuex store 中的操作，通过 `mapActions` 辅助函数，我们将其映射为组件的方法。
   
   在组件中可以直接使用 `this.increment()` 来调用该方法。
   
   

3. 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 的过程，避免了手动的引入和映射，使代码更加简洁和易读。请注意，这些辅助函数可以接收一个字符串数组，用于指定需要映射的状态、操作或突变，也可以传递一个对象来指定自定义的名称。