vuex的简单使用(已创建好uniapp项目)

没错，俺是又是觉得网上教的不太容易理解(主要没有图文并茂)。所以我要自己写个文章。表示本人对vuex就是略懂哈。下面Let’s go!

首先咱在项目src文件夹里面创建个store文件夹。然后新建一个index.js
index.js内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import test01 from './modules/test01'	// 后面会用创建

Vue.use(Vuex)

const vuex = new Vuex.store({
	modules: {
		test01	// 后面会用创建
	}
})

然后在同级目录下创建modules文件夹，新建一个test01.js(可以自定义名字)
test01.js内容如下(当然，该module也可以具有modules！用法跟下面讲的一样)

export default {
	namespaced: true,	// 空间命名
	state: {			// 存储数据的地方
		name: '123',
	},
	getters: {
		getName(state) {
			return state.name
		}
	},
	actions: {
		setName({commit}, data) {	// 这里data也可以命名其他的
			commit('setName', data)	// 第一个参数是motations里的函数名, 第二个参数是设置的name值
		}
	},
	motations: {
		setName(state, data) {
			state.name = data
		}
	}
}

然后在main.js文件里分别加

然后进入使用

分别如图，一 一 对 应

...mapState({
	name: state => state.test01.name
})
上面的name可以直接{{name}}使用
...mapActions('(module名)', ['(actions下的函数)'])
...mapMutations()	// 如上
...mapGetters()		// 如上

这边我附下我的index.vue(默认模板QWQ)

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view>
			<text class="title">{{name}}</text>
			<button @tap="test">测试</button>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		computed: {
			...mapState({
				name: state => state.test01.name
			})
		},
		methods: {
			...mapGetters('test01', ['getName']),
			...mapActions('test01', ['setName']),
			test() {
				this.setName(this.name + 1)
				console.log(this.getName());
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

显示如下

当然，这个设置的值，也可以在其他页面使用。(具体能应用到什么什么情况，就不具体说明了。)
跳转其他页面显示如下(没有传参数！)

emmmm，感觉写的很粗略，希望观看文章的朋友能明白！如有什么不明白了的，可以评论告知或私信告知，咱交流，嘿嘿(*^▽^*)

最后，感谢你阅读我的文章，感恩！