4.uniapp+vue3项目使用vuex

1. uniapp+vue3项目使用vuex

这篇文章,既是使用的教程,也是用来解决一个实际问题:uView自定义tabbar减少代码冗余。

先看使用vuex的方法。

1.1. main.js引入store

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';
// 引入vuex步骤1
import store from '@/store';

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  
  // 使用 uView UI
    app.use(uView)
  // 引入vuex步骤2
	app.use(store)
  
  return {
    app
	// Vuex // 如果 nvue 使用 vuex 的各种map工具方法时,必须 return Vuex
  }
}
// #endif

1.2. 创建store/index.js

根目录创建store/index.js

import {createStore} from 'vuex'//导入createStore构造函数
export default createStore({ 
    state:{ //Vuex的状态,实际上就是存数据的地方
        person:{
            name:'KelvinLiu',
            age:200
        }
    },
    getters:{ //提供获取Vux状态的方式, 注意在组件中调用时getPerson是以属性的方式被访问
        getPerson(state){
            return state.person
        }
    },
    mutations:{ //提供直接操作Vuex的方法,注意mutations里的方法中不能有任何异步操做
        ageGrow(state, value){
            //第一个参数state为Vuex状态;第二个参数为commit函数传来的值
            state.person.age += value
        }
    },
    actions:{ //提供通过mutations方法来简介操作Vuex的方法
        ageGrow(context, value){ 
            //第一个参数context为上下文,提供一些方法;第二个参数为dispatch函数传来的值
            context.commit('ageGrow', value)
        }
    }, 
})

1.3. 项目中引用

<template>
	<view class="content">
		{{person}}记一笔
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {useStore} from 'vuex' 


	export default {
		data() {
			return {
				title: 'Hello uView',
				tabbar: [],
				person: ''
			}
		},
		onLoad() {
			const store = useStore();    //获取store对象
			let person = store.getters.getPerson ;
			this.person = person.name;
			console.log(person);

			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量,您可以将tabbar数组写入到vuex中,这样可以全局引用
			 */
			this.tabbar = [{
					iconPath: "/static/tab-bar/账单.png",
					selectedIconPath: "/static/tab-bar/账单_h.png",
					text: '账单',
					pagePath: "/pages/bill_list/bill_list"
				},
				{
					iconPath: "/static/tab-bar/图表.png",
					selectedIconPath: "/static/tab-bar/图表_h.png",
					text: '图表',
					pagePath: "/pages/bill_chat/bill_chat"
				},
				{
					iconPath: "/static/tab-bar/记账.png",
					selectedIconPath: "/static/tab-bar/记账_h.png",
					text: '记账',
					midButton: true,
					pagePath: "/pages/bill_add/bill_add"
				},
				{
					iconPath: "/static/tab-bar/明细.png",
					selectedIconPath: "/static/tab-bar/明细_h.png",
					text: '明细',
					pagePath: "/pages/bill_detail/bill_detail"
				},
				{
					iconPath: "/static/tab-bar/我的.png",
					selectedIconPath: "/static/tab-bar/我的_h.png",
					text: '我的',
					pagePath: "/pages/my/my"
				}
			]
		}
	}
</script>

<style>
	
</style>

最终显式的结果:

1.4. 开始解决实际问题

在上一篇文章中,写到的是:《使用uView让tabbar更优雅》,里面有一段文字描述:

示例中为每个tabbar页面都写了一遍tabbar变量,您可以将tabbar数组写入到vuex中,这样可以全局引用

那怎么使用上面的vuex store来优化呢?

就是把tabbar的数据,直接放在store里面,这样不需要每个页面都引用。

通过上面的引入vuex的过程,我们就可以优化uView里面自定义tabbar,就不需要每个页面都在data里面定义tabbar的数组了。

也就是这样:

<template>
	<view class="content">
		记一笔
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {useStore} from 'vuex' 


	export default {
		data() {
			return {
				tabbar: [],
			}
		},
		onLoad() {
			const store = useStore();    //获取store对象
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量,您可以将tabbar数组写入到vuex中,这样可以全局引用
			 */
			this.tabbar = store.getters.getTabbar;
		}
	}
</script>

<style>
	
</style>

代码里的冗余减少了,非常nice。

1.5. vuex和storage的区别

这里找的是PC端的区别,跟小程序应该是大同小异的,介质的区别是PC浏览器和微信载体。

Vuex 与 Storage的区别有几个:

(1)从存储的位置来说,Vuex 用的是内存,而 Storage 用的是文件存储;
(2)从易失性来说,Vuex与页面的生存周期相同(如关闭页面、刷新等数据就会消失),而
localStorage是“永久”存储的,sessionStorage 生存于应用会话期间;
(3)从存储空间来看,Vuex取决于可用内存和浏览器的限制,Storage
都有个默认的大小(至少5MB,由浏览器决定),超出大小则需要用户同意增加空间;
(4)从共享来看,Vuex无法跨标签页、跨物理页面共享,则Storage则可以在同一域名底下共享;
(5)从用途来看,Vuex是用于管理页面内容及组件的状态,而Storage主要是用于存储数据;
(6)Storage是由浏览器提供的基础设施,而Vuex则是由JavaScript程序库提供的服务。 …
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于在VSCode中配置Vue3、VuexUniapp的开发环境,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Node.js和npm(Node.js的包管理器)。你可以在官网上下载并安装它们。 2. 接下来,你需要全局安装Vue CLI。在命令行中执行以下命令: ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue项目。在命令行中进入你想要创建项目的目录,并执行以下命令: ``` vue create your-project-name ``` 根据提示选择你需要的特性和插件,包括Vuex,以及是否使用TypeScript等。 4. 安装Uniapp插件。在命令行中进入项目目录,并执行以下命令: ``` vue add uni-app ``` 根据提示选择适用于你的平台(如H5、微信小程序等)以及是否使用TypeScript等。 5. 配置Vuex。在项目目录中找到src目录,然后创建一个store目录,在其中创建一个index.js文件。在index.js中编写你的Vuex配置,例如: ```javascript import { createStore } from 'vuex' const store = createStore({ state: { // 状态 }, mutations: { // 修改状态的方法 }, actions: { // 异步操作 }, getters: { // 计算属性 } }) export default store ``` 然后,在src目录的main.js中引入Vuex使用它: ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store/index' createApp(App).use(store).mount('#app') ``` 6. 在VSCode中打开你的项目,在扩展商店中搜索并安装VueVuexUniapp相关的插件,例如"Vetur"和"uniapp-snippet"等。这些插件将提供语法高亮、代码提示和其他开发工具。 现在,你已经成功配置了VSCode中的Vue3、VuexUniapp开发环境。你可以开始开发你的项目了。祝你好运!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值