vue插件集合13：vuex的超级简单的应用

第一步 安装vuex

npm install vuex --save

第二步 新建store目录

在新建的store的目录下 新建 index.js文件 如下：

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
	state: {
	//变量名成
		ethnum:"",
		bttnum:"",
		ethnumAll:"",
		bttnumAll:''
	},
	mutations: {
	//提交方法
		getEthnum: (state, info) => {
			state.ethnum = info;
			console.log(state.ethnum)
		},
		getBttnum: (state, info) => {
			state.bttnum = info;
			console.log(state.bttnum)
		},
		getethnumAll: (state, info) => {
			state.ethnumAll = info;
			console.log(state.ethnumAll)
		},
		getBttnumAll: (state, info) => {
			state.bttnumAll = info;
			console.log(state.bttnumAll)
		},
	}
})

在main.js中

第三步

在某个vue组件中进行提交
事件：点击goStore方法 后进行提交
this.$store.commit("store中的mutations中某个方法名称",需要存到store中变量);如：this.$store.commit(“getBttnum”, this.list[2].num);

goStore(index) {
	// 
	this.$store.commit("getEthnum", this.list[1].num);
	// 将btt的数量存到vuex中
	this.$store.commit("getBttnum", this.list[2].num);
	this.$router.push({
		path: "/details",
		query: {
			pubId: index
		}
	});
},

第四步 取到存到Store中的内容

在data中定义一个变量名称用来获得数据
this.变量名 = this.$ $store.state.需要取到的内容如：this.ethnum=this.$$store.state.ethnum

5：Vuex数据状态持久化-vuex-persistedstate

npm install vuex-persistedstate --save

store下面的index修改为类似这种

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    	authInfo: {}
    },
    mutations: {
    	getAuthInfo: (state, info) => {
    		state.authInfo = info;
    		console.log(state.authInfo)
    	},
    },
    plugins: [createPersistedState()]
})

本人的一些略见，希望帮助到您

第二种方式

安装vuex 以及Vuex数据状态持久化-vuex-persistedstate
1：npm install vuex --save
2：npm install vuex-persistedstate --save
安装vuex 以及Vuex数据状态持久化-vuex-persistedstate
新建store的目录下 新建 index.js文件 如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
const state = {
	userInfo: 0, //用户信息
}
const mutations = {
	getUserInfoSUBADD(state, userInfo) { //用户信息+
		state.userInfo += userInfo
	},
	getUserInfoSUB(state, userInfo) { //用户信息-
		state.userInfo -= userInfo
	},
};
const actions = { //异步操作
	addactions(context, parms) {
		//this.$store.dispatch('addactions',parms) 触发actions函数
		//actions只能通过
		setTimeout(() => {
			context.commit('getUserInfoSUBADD', parms)
		}, 5000);

	},
	subactions(context, parms) {
		setTimeout(() => {
			context.commit('getUserInfoSUB', parms)
		}, 3000);
	}
}
const store = new vuex.Store({
	state,
	mutations, //同步操作
	actions, //异步操作
	plugins: [createPersistedState()]
})
export default store

main.js中

import store from './store/index.js'
Vue.prototype.$store = store //vuex挂载全局

页面中 1：

<template>
	<view class="content">
		{{userInfo}}
		<button type="default" @click="add">加</button>
		<button type="default" @click="sub">减</button>
		<button @click="getTou">asdf </button>
	</view>
</template>

<script>
	//1.引入 mutations actions 提交的第二种方式mapMutations 、mapActions 
	//在method中注册 就可以像本页注册的方法一样使用了
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			return {
			
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['getUserInfoSUBADD', 'getUserInfoSUB']), //从vux中映射出的函数可以直接在dom中@click="方法名"
			...mapActions(['addactions', 'subactions']),
			add() { //加
				// 第一种方式 this.$store.commit('getUserInfoSUBADD',2)
				// 第二种方式 this.getUserInfoSUBADD(2)
				this.$store.dispatch('addactions','2') //触发actions函数
			},
			sub() { //减
				this.$util.toast('拉拉')
				// 第一种方式 this.$store.commit('getUserInfoSUB',2)
				// 第二种方式 this.getUserInfoSUB(2)
				this.$store.dispatch('subactions','1') //触发actions函数
			},
			getTou(){
				this.$route.push({
					path:"/index2"
				})
			},
		}
	}
</script>

页面中 2：

<template>
	<view class="content">
		{{userInfo}}
	</view>
</template>
<script>
	//1.引入 mutations actions 提交的第二种方式mapMutations 、mapActions 
	//在method中注册 就可以像本页注册的方法一样使用了
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			return {
			
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['getUserInfoSUBADD', 'getUserInfoSUB']), //从vux中映射出的函数可以直接在dom中@click="方法名"
			...mapActions(['addactions', 'subactions']),
			add() { //加
				// 第一种方式 this.$store.commit('getUserInfoSUBADD',2)
				// 第二种方式 this.getUserInfoSUBADD(2)
				this.$store.dispatch('addactions','2') //触发actions函数
			},
			sub() { //减
				this.$util.toast('拉拉')
				// 第一种方式 this.$store.commit('getUserInfoSUB',2)
				// 第二种方式 this.getUserInfoSUB(2)
				this.$store.dispatch('subactions','1') //触发actions函数
			},
		}
	}
</script>