uniapp中使用vuex

先说下vuex中的state的使用

首先创建一个index

在store的index中写入

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	// 数据参数
	state:{
		list:[
			{
				id:1,
				name: "商品一",
			},
			{
				id:2,
				name: "商品2",
			},
			{
				id:3,
				name: "商品3",
			},
		]
	},
	// 计算属性
	getters:{
		
	},
	// 同步方法
	mutations:{
		
	},
	// 异步方法
	actions:{
		
	}
})

export default store

在main,js中引入

import store from './store'
Vue.prototype.$store = store
const app = new Vue({
	store
})
app.$mount()

然后在页面中就可以调用了
有多种调用方法

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				list: null
			};
		},
		
		onLoad() {
			//第一种直接调用
			console.log(this.$store.state.list)
			//输出list
			console.log(this.list)
		},
		computed:{
			...mapState({ 
				//第二种
				list: state=> state.list
				//第三种
				list:'list'
				//第四种
				newList(state){
					//这里可以写一些拿到数据之后的逻辑代码
					return state.list
				}
			})
		},
	}
</script>

getters使用

getters可以把他当成一个计算属性

// 数据参数
	state:{
		list:[
			{
				id:1,
				name: "商品一",
				status:true,
				num: 2
			},
			{
				id:2,
				name: "商品2",
				status:false,
				num: 15
			},
			{
				id:3,
				name: "商品3",
				status: true,
				num: 52
			},
		]
	},
	// 计算属性
	getters:{
		// 获取status为true的值
		active:(state)=>{
			return state.list.filter(v=>v.status)
		},
		// 获取商品num大于10的
		getList:(state,getters)=>{
			return getters.active.filter(v=>{
				return v.num > 10
			})
		},
		// 获取对应的id
		getById:(state)=>(id)=>{
			return state.list.filter(v=> id === v.id)
		}
	},

vue方法调用，第一种直接调用

 console.log(this.$store.getters.active)

第二种使用mapGetters 对象获取

	import { mapState, mapGetters } from "vuex"
	computed:{
			...mapGetters({
				active: 'active',
				getList: 'getList',
				getById: 'getById'
			})
		},

第三种使用mapGetters 数组获取

computed:{
	 ...mapGetters(['active','getList','getById'])
},
//打印
onLoad() {
	  console.log(this.active)
	  console.log(this.getList)
	  console.log(this.getById(2))
}

mutations使用
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。

// 同步方法
	mutations:{
		sum(state,n){
			console.log(++n)
		}
	},

	import { mapState, mapGetters, mapMutations } from "vuex"
methods: {
	...mapMutations({
		sum: 'sum'
	}),
}
onLoad() {
	this.sum(1)
},