vuex的使用介绍

1、引入

//main.js
import store from "./store"
Vue.prototype.$store = store
const app = new Vue({
	store,
    ...App
})

2、创建store文件夹，我这个是开启了模块空间

//例如
export default {
	state:{
		// 登录状态
		loginStatus:false,
		// token
		token:null,
		// 用户信息
		userInfo:{}
	},
	mutations:{
		// 登录
		login(state,userinfo){
			state.userInfo = userinfo
			state.loginStatus = true
			state.token = userinfo.token
			// 持久化存储
			uni.setStorageSync('userInfo',JSON.stringify(userinfo))
		},

	},
	actions:{
		// 更新购物车列表
		doShowPopup({state,commit},parmas){
		   //	commit('login',data)  调用mutations方法，state就是state值，parmas为传值的参数
			
		},
	}
}

3、调用的介绍

//调用方式：
总的引入：import {mapState,mapGetters,mapActions,mapMutations} from "vuex"， 通过解构方式的，不需要区分模块名

1、import {mapState} from 'vuex';
	computed: {
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
	第二种：this.$store.state.user.token  引入store或者原型上的store名，因为用了modules，需要带上模块名，比如user模块，然后取到user的state的token值	
	
    描述：直接调用重构变量名后的变量 ，例如：<view>userInfo.name</view>
  
 2、import {mapActions} from "vuex"
 methods: {
 	...mapActions([
 		'doHidePopup',
 		'updateCartList'
 	]),
 }	
 描述：直接通过this.doHidePopup() 调用方法
 
 第二种：  this.$store.dispatch("vuexTest/actionsHello", "val123456"); // 前面是指定模块vuexTest 中的actionsHello 方法，后面是传参 可以是对象、数组、字符串等
 
 3、import {mapGetters} from "vuex"
	computed: {
			...mapGetters([
				'checkedAll',
				'totalPrice',
				'disableSelectAll'
			])
		},
 描述:直接调用变量名，不用区分模块名，例如： <price :text="totalPrice"></price>
 
 4、import {mapMutations} from "vuex"
 	methods:{
		 ...mapMutations([
			'selectItem',
			'initCartList',
			'unSelectAll'
		 ]),
    }
 描述:直接调用方法名，不用区分模块名，例如： <view @click="selectItem()">点击</view>
 
 第二种调用：this.$store.commit("vuexTest(模块名)/mutationsHello", 2)   前面是指定模块vuexTest ，mutationsHello指vuexTest(模块名)内的方法名，
 如果没有开启model模块，如：this.$store.commit("mutationsHello", 2)，mutationsHello就是action的方法名，2是参数