26.uniapp使用vuex（我的备忘录）

点赞收藏加关注，你也能住大别墅！

用uniapp开发微信小程序时，有些情况下，我们需要动态更新页面中的数据，当然，例如v-model可以实现数据的双向绑定，但是v-model的使用具有局限性，非表单元素使用起来很麻烦。这个时候我们就可以使用vuex来解决数据动态更新的问题，也就是说当服务端的数据改变后，客户端的数据自动同步更新。官网中对vuex的介绍很详细，这里我只对自己平时常用的一套方法来记录。
第一步：在main.js中完成导入和注入vuex。

import store from './store' //导入vuex
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store); //注入vuex
	return {
		app
	}
}

第二步：初始化store（数据仓库）
在根目录下创建store文件夹，在store文件夹里创建index.js文件。index.js的基本结构如下：

import {
	createStore
} from 'vuex'
const store = createStore({
	state: {
	//数据
	},
	getters: {
	//显示数据走这里
	},
	mutations: {
	//修改数据走这里
	}
})
export default store

第三步：使用
1、在需要使用store中定义的数据的页面中导入：

	import store from '@/store/index.js'; //导入store
	import {
		mapGetters
	} from 'vuex' //导入两个工具mapGetters

2、显示数据
在store的index.js中，getters属性中编写需要显示的数据对应的函数例如：

state: {
	//数据
	username:"endingCode"
},
getters: {
//显示数据走这里
	username(state){
		return state.username
	}
},

回到页面中，在计算属性computed中使用mapGetters

computed: {
	...mapGetters([
		'username'//这里的名字和在state里定义的名字一致，可以省事，复制粘贴报平安！
	])
}

在页面中使用数据的位置用{{username}}就可以了。

3.修改数据
vuex提供了mutation和action两种机制，二者使用方法上没什么大的区别，不同之处在于action支持异步操作（这里省略，只说mutation）。
在store的index.js中的mutations属性中编辑和数据对应的函数，例如：

state: {
	//数据
	username:"endingCode"
},
getters: {
//显示数据走这里
	username(state){
		return state.username
	}
},
mutations:{
	doUsername(state,obj){
		this.state.username = obj.username
	}
}

在页面中通过store.commit()调用mutations里的对应函数并把服务端的新数据一并传值过去，例如：

//业务代码
store.commit("doUsername", {username: '新数据'});
//业务代码

如果在业务逻辑中需要用到仓库中的数据，那么也可以直接通过this.$store.state.变量名的形式直接获取，并使用。vuex被设计的很灵活，在遵守规范的前提下，想咋用就咋用。