4.uniapp+vue3项目使用vuex_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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

最终显式的结果：

1.4. 开始解决实际问题

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

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

那怎么使用上面的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

代码里的冗余减少了，非常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程序库提供的服务。 …
1
2
3
4
5
6
7
8
9
10