<h2>前言</h2>
看了网上很多关于用vuex的例子，但是千篇一律都是在页面加两个按键加减什么的，或者将一些半吊子理论，但是在实际业务中我们用的公用状态很多都是需要传参的，所以我写一篇关于vuex传参的，不将理论，只讲用法，新手怕误人子弟
一般项目需要用的状态比较多的时候而且分模块的时候，那么每个模块的共享状态可以单独放在一个js里面，如本文实例这样
第一步 先安装vuex
npm install vuex -S
第二步 新建一个store文件夹，然后在文件夹下新建一个js文件，举例用的是index.js
//index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
//main.js 我们要在main.js全局js里面引入index.js文件，并挂载到实例上
import store from './store/index' //路径根据自己的实际路径写
new Vue({
el: '#app',
router,
store, //把store挂载上来
components: { App },
template: '<App/>'
})
//继续完善index.js里面的内容
//index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
//新建一个状态对象state
const state ={
loginMessage:{ //比如这个对象是登录用户的一些信息
isLogin: false, //是否登录，默认false
userName: '', //用户名
}
};
//新建一个改变状态方法的对象 mutation
const mutations ={
checkLoginMethod(context,flag){ //flag就是参数
context.loginMessage.isLogin = flag;
},
}
//新建一个actions
const actions ={
checkLoginMethods({commit,state},flag){ //这个对象第一个是vuex自带的commit方法
commit('checkLoginMethod',flag);
}
}
//新建一个获取getters以便获取这些实时变动的状态
const getters = {
getLoginMessage(context){
return context.loginMessage
}
}
把定义的这些东西全部暴露出去，让外部可用
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
第三步 在test.vue组件里测试一下
//test.vue
<template>
<div class="vuexWrapper">
<button @click="get">获取状态</button>
<div>{{getLoginMessage.isLogin}}</div>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex' //引用vuex的扩展函数
export default {
// 得到计算后的值
computed:{ //把变动的状态值放在computed里面这个是getters里面的值
//下面这个用法有兴趣的话可以去自己看下，如果有多个状态值，在数组里用,隔开
...mapGetters(['getLoginMessage']),
},
methods:{
//把action定义的方法在methods里面引用
...mapActions(['checkLoginMethods']),
get(){
//点击get的时候调用checkLoginMethods方法
this.checkLoginMethods('true');
}
}
}
</script>
看看效果
默认加载，没有点击的时候
image.png
点击之后的效果
image.png
以上所述就是一个非常简易版的vuex应用，希望对大家有帮助
