vuex在uniapp的使用方式

菥蓂寻生

已于 2022-08-10 12:44:08 修改

阅读量615

点赞数 1

分类专栏： uniapp 文章标签： vue.js javascript 前端

于 2022-08-10 10:50:30 首次发布

本文链接：https://blog.csdn.net/qq_44604166/article/details/126258929

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vuex在uniapp的使用方式

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

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

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

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

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

在这里插入图片描述

我们可以从图中看出vuex是一个遵循的数据单向流，所以在使用时一定要遵循单向流的使用规范
1.获取状态机状态和属性必须在computed里面获取
2.页面组件中通过 this. $s t roe . s t a t e . n u m 获取数据（该未模块化划分） * * * * 3. 拆分模块化后需要使用要点进去 t hi s .$ stroe.state.count.num 获取数据
4.修改stroe的数据要使用单向数据流的方式访问 mutations 或 actions 来修改store的数据
5.触发mutations 的函数事件用 this. $s t roe . co mmi t (^{'} 函数名^{'}, 传递的值) * * * * 6. 触发 a c t i o n s 的函数事件用 t hi s .$ 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){
			
		}
	}
}