Vuex从仓库的创建到组件内的使用

Vuex基本使用

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath(’’)
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

仓库建立方式:

store文件夹布局如下：

modules
--- app.js
--- index.js
getters.js
index.js

main.js

import Vue from "vue";
import Vuex from "vuex";
import modules from "./modules";
import getters from "./getters";

Vue.use(Vuex);
const debug = process.env.NODE_ENV !== "production";

export default new Vuex.Store({
  modules,
  getters,
  strict: debug
});

modules下的index.js

import app from "./app";

export default {
  app
};

moules下的app.js

import Cache from '@/utils/cache' //引入文件
// 存储状态变量
const state = {
	config: {},
	userInfo: {
		user_money: 0,
		user_integral: 0,
		coupon: 0
	},
	token: Cache.get(TOKEN) || null,
	...
};
// 修改状态
const mutations = {
	LOGIN(state, opt) {
		state.token = opt.token;
		Cache.set(TOKEN, opt.token, 60 * 24 * 60 * 60);//执行的其他操作
	},
	...
};
// 异步操作
const actions = {
	getCartNum({
		state,
		commit
	}) {
		return new Promise(resolve => {
			if (!state.token) return
			getCartNum().then(res => {
				if (res.code == 1) {
					commit('SETCARTNUM', res.data.num);//通过commit调取mutations的方法进而修改状态
					if (!res.data.num) return uni.removeTabBarBadge({
						index: 2
					})
					uni.setTabBarBadge({
						index: 2,
						text: String(res.data.num)
					})
					resolve()
				}
			})
		})
	},
	getUser({
		state,
		commit
	}) {
		return new Promise(resolve => {
			getUser().then(res => {
				if (res.code == 1) {
					commit('SETUSERINFO', res.data)
				}
				resolve()
			})
		})
	}
};
export default {
	state,
	mutations,
	actions
};

getter.js

export default {
  userInfo: state => state.app.userInfo || {},
  token: state => state.app.token,
  isLogin: state => !!state.app.token,
  cartNum: state => state.app.cartNum,
  loginNum: state => state.app.loginNum,
  inviteCode: state => state.app.userInfo.distribution_code || "",
  appConfig: state => state.app.config
};

组件中使用

页面中使用：

{{ $store.state.name }}

方法及值引入：

import {
	mapState,	
	mapGetters,
	mapActions,
	mapMutations
} from 'vuex'

方法使用：

	//下述中的 ... 是拓展运算符
    // 使用 [] 是解构赋值
    methods:{
		...mapMutations(['LOGIN']),
		...mapActions(['getUser']),
		logout() {
			this.$store.state.name;//仓库值的获取
			this.$store.commit("LOGOUT"); //同步操作-仓库值修改--基于mutations
			this.$store.dispatch("LOGOUT"); //异步方法调取--基于actions 
			this.$store.getters.fullInfo;//从获取到经过getter处理后的值
			
		}
    },
	computed: {
		...mapGetters(["cartNum", "inviteCode"])
		...mapState(['token'])
	}