vue3 uniapp 使用axios

vuex在uniapp的使用方式

本人专注使用云开发，实现一个前端可以做后端以及整个项目的部署与上线。

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

这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。

注意：在uniapp中只能使用vue2版本的所以导致vuex也只能使用vuex3.x的版本

我们可以从图中看出vuex是一个遵循的数据单向流，所以在使用时一定要遵循单向流的使用规范
1.获取状态机状态和属性必须在computed里面获取
2.页面组件中通过 this.$stroe.state.num 获取数据 （该未模块化划分 ）** **3.拆分模块化后需要使用 要点进去 this.$stroe.state.count.num 获取数据
4.修改stroe的数据要使用 单向数据流的方式访问 mutations 或 actions 来修改store的数据
5.触发mutations 的函数事件用 this.$stroe.commit($stroe.dispatch(‘函数名’,传递的值)

vuex的使用步骤

1.与main.js同级创建一个名为store的文件夹
2.创建一个index.js的js文件，当然你也可以用其他命名，这个的作用主要是用来初始化vuex

import Vue from "vue"
import Vuex  from "vuex"
//引入模块化Vuex
import count from './count.js'
import user from './user.js'
Vue.use(Vuex)
const store = new Vuex.Store({
	// state:{
	// 	num:100
	// }
	//模块化引入组件
	modules:{
		count,
		user
	}
})
export default store

3.在main.js里面注册store

import App from './App'
//引入VUEX状态机
import store from 'store/index.js'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App, 
	store   //注入状态机
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

4.模块化组件的注册和使用

export default {
	// namespaced:true,  //开启命名空间 属性都变局部变量了  访问所有属性需要带模块名
	state(){
		return {
			userinfo:null
		}
	},
	mutations:{
		init_info(state,user_inf){
			state.userinfo = user_inf;
		}
	},
	actions:{
		//用来获取数据 外部 API 请求等等
		userLogin(context,info){
			
		}
	}
}