vuex的使用

什么是vuex?

官方文档说的是,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单理解为就是,当多个组件之间都需要使用同一个数据时,就可以通过vuex来管理这个数据,避免数据在当前组件,而其他组件也需要使用时,来回传递带来的繁琐性!

1.引入

一般使用vuex都会依赖于脚手架(cli),所以这里就只说在cli上的使用了!

通过npm的方式
npm install vuex@next --save
通过yarn的方式
yarn add vuex@next --save

两者没有区别,只是引入方式不同 --save是把模块自动写入到packages.json中,@next为安装最新版本

2.配置

首先在src创建一个store文件夹,在store文件夹下面创建一个index.js文件,注意,命名没有限制,在index.js里写入

import Vue from 'vue'
import Vuex from 'vuex'
//将vuex挂在到vue实例上
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'小白',
    age : 24,
    sex: '男'
  },
  getters: {
     calculation(state){
      return `姓名:${state.name}年龄:${state.age}`
    }
  },
  mutations: {
    increment (state,_name) {
      // 变更状态
      state.name = _name
    }
    changeSex(state,_sex) {
      // 变更状态
      state.sex= _sex
    }
  },
  actions: {
    asynchronous({commit,state},_sex){
      setTimeout(() => {
        commit('changeSex',_sex)
      }, 1000)
      console.log(commit);// mutations中的方法
      console.log(state); // {name:'小白',age : 24,sex:'男'}
      console.log(_sex); //传递的参数 '女'
    }
  },
  modules: {
  }
})

在main.js里引入

import Vue from 'vue'
//引入的路径根据自己写的为主
import store from './store'
new Vue({
  store
  render: h => h(App)
}).$mount('#app')

3.五个对象的介绍

3.1 state :用来存储数据,类似于data

3.2 getters :用来计算state中的数据,类似于计算属性

3.3 mutations :更改state的属性,必须是同步的,如果需要异步需要使用actions,mutations中的方法接受参数为,第一个参数为state中的数据,第二个为组件调用当前回调函数时所传的参数

3.4 actions:和mutations大致一致,不同点在于,actions中的方法最终会提交给mutations,他不能直接修改state中的数据,actions中可以包含任意异步操作,如:请求数据

3.5 modules:模块化vuex,可以将vuex细化,分给属于自己的模块

4.代码使用

数据为2中配置的在组件中的使用

//组件标签中
 {{$store.state.name}}
//组件方法中
 this.$store.state.age

//另外一种通过辅助函数mapState 
import { mapState } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 computed 对象中
  // computed: {
    ...mapState ([
      'sex'
    ])
  }
}
//直接this.sex使用

getters的使用

//组件标签中
 {{$store.getters.calculation}}
//组件方法中
 this.$store.getters.calculation
//另外一种通过辅助函数mapGetters
import { mapGetters } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 computed 对象中
  // computed: {
    ...mapGetters([
      'calculation'
    ])
  }
}
//此时calculation方法就相当于本组件中计算属性中的一个方法,怎样使用计算属性中的方法就怎样使用calculation方法

mutations的使用

//组件标签中
 {{$store.mutations.increment('香香') }}
//组件方法中
 this.$store.mutations.increment('香香')

//另外一种通过辅助函数mapMutations 
import { mapMutations } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 methods 对象中
  // methods: {
    ...mapMutations ([
      'increment'
    ])
//可以直接this.increment('香香')调用
//映射
     ...mapMutations ({
      add:'calculation'
    })
//可以直接this.add('香香')调用
  }
}

actions的使用

//组件标签中
 {{$store.dispatch('asynchronous',女)}}
//组件方法中
 this.$store.dispatch('asynchronous',女)

//另外一种通过辅助函数mapActions 
import { mapActions } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 methods 对象中
  // methods: {
    ...mapActions  ([
      'asynchronous'
    ])
//可以直接this.increment('香香')调用
//映射
     ...mapActions  ({
      add:'asynchronous'
    })
//可以直接this.add('香香')调用
  }
}

modules的使用

store目录下新建一个文件,为模块vuex文件,内容为

export default({
  state: {
    name:'香香',
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  
  }
})

index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'
import modular from '新建文件路径'

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    modular
  }
})

模块里的数据使用与index.js中的区别是需要在数据前加上模块的名字不然这里的name使用为$store.state.modular.name其他的类似

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值