【uni-app】使用vuex

1、在根目录新建store文件夹和相关文件

2、具体文件内容—/store/modules/cart.js

const state = {
	// 购物车的数组，用来存储购物车中每个商品的信息对象
	cart: [1,2,3]
}

const mutations = {
	SET_CART: (state, cart) => {
		state.cart = cart
	}
}

const actions = {
	changeCart({ commit }){
		commit('SET_CART', [4,5,6])
	}
}

export default {
	namespaced: true,
	state,
	mutations,
	actions
}

3、具体文件内容—/store/idnex.js

import Vue from 'vue'
import Vuex from 'vuex' //uni-app已经带有vuex，所以直接引用即可
import cart from './modules/cart'
Vue.use(Vuex)

const store = new Vuex.Store({ 
	modules:{ //注册cart模块
		cart
	} 
})

export default store

4、main.js中挂载vuex

//省略其他代码
import store from './store/index'
//省略其他代码
const app = new Vue({
	...App,
	store
})
app.$mount()

5、在vue页面中使用

<template>
	<view>
		store中的cart值为：{{cart[0]}}{{cart[1]}}{{cart[2]}}
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				...
			}
		},
		computed:{
			//通过计算属性可以读取并实时监听状态的变化
			...mapState({
				cart(state){
					return state.cart.cart
				}
			})
		},
		mounted(){
			//调用changeCart改变cart值，或者进行自定义的逻辑操作
			this.changeCart()
		},
		methods: {
			//把mapActions的方法放到methods里
			...mapActions({ changeCart: 'cart/changeCart'})
		}
	}
</script>