关于vueX 及 对应写法

目录文件：

utils/config.js

export default {
	host:'http://localhost:3002'
}

utils/request.js

import config from './config.js'

export default (url, data = {}, method = 'GET') => {
	return new Promise((reslove, reject) => {
		uni.request({
			url: config.host + url,
			data,
			method,
			success: (res) => {
				reslove(res.data);
			},
			fail: (err) => {
				reject(err)
			}
		});
	})
}

不使用 vuex 写法示例

 <script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
               initData:'初始化数据',
    		   indexData:{} 
            };
		},
		computed:{
		},
		methods:{
			async getIndexData(){
				let result = await request('/请求接口')
				console.log(result);
			}
		},
        mounted() {
			this.getIndexData()
            //console.log(this.$store)  //获取仓库
            
			console.log(this.$store.state.initData)
			console.log(this.initData)
            this.$store.dispatch('getIndexData')
		},
	}
</script>

关于vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有
组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了
诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

为什么要使用 vuex ?

vuex 解决页面之间的数据传递，多组件共享状态问题

• state，驱动应用的数据源；（唯一数据源，单一状态树）
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行
权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，
您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。

但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，
Vuex 将会成为自然而然的选择。 

Vuex状态管理

• Backend API：后端接口； Vue Components: 界面组件；
• 操作步骤： 当组件中的状态发生改变，通过dispatch函数分发到Action，Actions再通过Commit函数提交到Mutations, Mutations修改状态渲染到组件，此时，状态发生改变都会实时的去渲染组件。

Vuex的核心概念

包括6大部分内容：

1	state	设置状态state	mapState	computed
2	getters	获取内容getters	mapGetters	computed
3	mutations	修改数据mutations	mapMutations	methods commit
4	actions	异步操作actions	mapActions	methods dispatch
5	modules	模块拆分modules	namespaced（命名空间）
6	plugins	插件支持plugins

安装与使用

npm i vuex --save

单一状态树，只要把store注册到main.js中，所有组件都可以使用其中的状态

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入vuex环境
import store from "./store"

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

代码示例

store/modules/index/index

不使用辅助函数时忽略 mutations,actions

const state = {
	initData:'初始化数据',
    indexData:{}
}
const getters = {}
const mutations = {
    // 第一个参数是state状态值，第二个参数是有效载荷
	changeIndexDataMutation(state,payload){
		state.indexData = payload
	}
}
const actions = {
    async getIndexDataAction({commit}){
		let result = await request('/getIndexData');
		console.log(result)
		commit('changeIndexDataMutation',result)
	}
}
export default{
	namespaced:true, // 命名空间
	state,
	getters,
	mutations,
	actions
}

store/index

import Vue from 'vue'
import Vuex from 'vuex'
import indexModule from './modules/index'

Vue.use(Vuex);

export default new Vuex.Store({
	modules:{
		indexModule
	}
})

pages/index/index.vue

一、不使用辅助函数

不使用辅助函数时忽略store/modules/index/index 里的mutations,actions

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {};
		},
		computed:{
		},
		methods:{
			async getIndexData(){
				let result = await request('/getIndexData')
				console.log(result);
			}
		},
        mounted() {
			this.getIndexData()
			// 第一种状态的获取方式，不使用映射操作，直接进行仓库的状态值获取操作
            //console.log(this.$store)  //获取仓库
            
			console.log(this.$store.state.indexModule.initData)
			console.log(this.initData)
            //1 
            this.$store.dispatch('indexModule/getIndexDataAction')
		},
	}
</script>

二、使用辅助函数映射处理

<script>
	import request from '../../utils/request.js'
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {};
		},
		computed:{
            // 第二种写法，映射处理
			...mapState({
                initData: state=> state.indexModule.initData
                indexData: state=> state.indexModule.indexData   
		    })
		},
		methods:{
			async getIndexData(){
				let result = await request('/getIndexData')
				console.log(result);
			},
            // 2 不建议这种写法
            ...mapActions(['indexModule/getIndexDataAction'])  
		},
        mounted() {
			this.getIndexData()
			console.log(this.initData)
            this['indexModule/getIndexDataAction']() //调用Actions
            
		},
	}
</script>

三、使用辅助函数命名空间

<script>
	import request from '../../utils/request.js'
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {};
		},
		computed:{
            // 第三种写法，映射处理，使用命名空间
			...mapState('indexModule',['initData','indexData'])
		},
		methods:{
			async getIndexData(){
				let result = await request('/getIndexData')
				console.log(result);
			}，
            //3
			...mapActions('indexModule',['getIndexDataAction'])
            
		},
        mounted() {
			this.getIndexData()
			console.log(this.initData)
            this.getIndexDataAction() //调用Actions
		},
	}
</script>