vueX的使用
大家在做vue的项目中一定遇到了父子组件传参的问题吧,那么一次两次还行,但如果有好多个组件和很多数据的时候大家有没有为此感到头大呢 ^_^ 没有关系 现在就让我带大家解决这个问题 在vue当中呢有一个专门管理数据的一个仓库 没错 就是我所说的vuex了 请看代码↓↓↓↓↓↓↓↓↓↓↓↓
第一步:下载cnpm install vuex--save
第二步:在src目录下创建store目录,在store目录中创建三个文件
①state.js: //保存数据状态
let state={ count:0, goodsList:[] } export default state;
②mutations.js: //写一下操作数据状态的方法
import state from './state.js'//导入数据状态state export default{ increment(state,num){//increment加方法 state.count+=num; }, reduce(state,num){//reduce减方法 state.count-=num; }, addgoods(state,obj){//添加数组的方法 state.goodsList.push(obj) } }
③getters.js:相当于computed计算属性,把需要在页面显示的数据配置一下
export default{ count:(state)=>{ return state.count; } }
④index.js:把state文件、mutations文件、getters文件集合到一起方便导出
import state from './state'; import mutations from './mutations' import getters from './getters' export default{ state, mutations, getters }
第三步:在min.js中配置
import Vuex from 'vuex'; Vue.use(Vuex); import storeObj from '@/store/index'//导出引入全局vueX let store=new Vuex.Store(storeObj);//使用 new Vue({ el:'#app', router, store,//在new Vue中注册全局使用 })
第四步:创建vue组件
比如:com11.vue组件
<button @click='red()'>减少3</button>
import{ //先引入vuex 中mutations方法 mapMutations } from 'vuex' export default { name:"com11", methods:{ ...mapMutations([ 'reduce'//使用vuemutations中的减法方法 ]), red(){//减法方法 this.reduce(3) } } }
比如:com22.vue组件(显示count)
import { mapGetters }from 'vuex' export default { name:"com33", computed:{ ...mapGetters([ 'count' ]) } }