uniapp-vuex学习

一.概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

二.使用
因为uniapp中已经内置了vuex，所以可以直接引用。
①在main.js中引入

import Vuex from 'vuex'
console.log(Vuex);

打印结果如下：证明有vuex

②新建一个store文件夹，在里面新建文件index.js

③在index.js中引入

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

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		num:0
	},
	//方法
	mutations:{
		add(state){
			state.num++;
		}
	}
})

④在main.js中引入

import store from './store'

然后将方法写入全局

Vue.prototype.$store=store;

⑤在index.vue里写

<view>Vuex测试</view>
<view>{{name}}</view>
<view>数量：{{num}}</view>
<view>总价：{{0}}</view>
<button type="primary" @click="add">add</button>

export default {
	data() {
		return {
			name:this.$store.state.name
		}
	},
	methods: {
		add(){
			this.$store.commit("add");
		}
	},
	computed:{
		num(){
			return this.$store.state.num;
		}
	},
	count(){
		return this.$store.getters.count;
	}
}

⑥在index.js中写

export default new Vuex.Store({
	//全局属性变量
	state:{
		num:0,
		price:10,
		name:'苹果'
	},
	//全局同步方法, 调用方法,this.$store.commit("xxx")
	mutations:{
		add(state){
			state.num++;
		}
	},
	//Vuex属性计算,在视图里面当变量使用
	getters:{
		const(state){
			//这个函数的执行依赖一个可变的变量
			return state.num*state.price;
		}
	}
})

效果如下图：

三.异步方法
①在index.js里面写

export default new Vuex.Store({
	//全局属性变量
	state:{
		testList:[]
	},
	//异步方法, 调用方法,this.$store.dispatch("xxx")
	actions:{
		testActions(context){
			//context里面包含了 state,mutations,getters,actions
			console.log(context)
			//执行一些异步参数,通用ajax
			setTimeout(()=>{
				context.state.testList=["猪猪侠","超人强","喜洋洋","老村长"]
			},2000);
		}
	}
})

②在index.vue里面写

<button type="primary" @click="testActions">testActions</button>
<view v-for="(item,index) in testList" :key="index">{{item}}</view>

export default {
	methods: {
		testActions(){
			this.$store.dispatch("testActions");
		}
	},
	computed:{
		testList(){
			console.log("run");
			console.log(this.$store.state.testList);
			return this.$store.state.testList;
		}
	}
}

点击button按钮效果：