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 UIapp.use(uView)// 引入vuex步骤2app.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程序库提供的服务。 …