这两天做项目用到了vuex,正好把他做个总结,便于以后在看。使用方法是mapState,mapGetters,mapActions,mapMutations。前面是基础使用方法,后面是模块化(项目中多会使用)。
1.安装 npm install vuex --save
2.使用在main.js里面
import router from './router'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3.在store文件下面index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{},
mutations:{},
getters:{},
actions:{}
})
3.1 state 类似于vue文件下的data,使用方法:在computed中使用
state:{
data:[
{name:'大衣',color:'蓝色',price:'12'},
{name:'连衣裙',color:'白色',price:'25'},
{name:'大衣',color:'黑色',price:'38'},
]
}
3.1.1 先引入
import {mapState} from 'vuex'
3.1.2 在computed中使用
computed:{
...mapState({goods:state=>state.data})
}
3.1.3 使用state里面的属性
<div>{{goods}}</div>
3.1.4 注意:
mapState是{},里面是function的形式,不要忘记了()(笔者刚开始时经常忘记)
3.2 getters 类似computed属性,用在computed中,第一个参数是state,
getters :{
getTotal(state){
let sum = 0 ;
state.data.forEach((item=>{
sum = sum+item.price
}))
return sum;
}
}
3.2.1 先引入
import {mapGetters} from 'vuex'
3.2.2 在computed中使用
computed:{
...mapGetters({total:'getTotal'})
//或者是 ...mapGetters(['getTotal']),使用是{{getTotal}}
}
3.2.3 使用getters里面的属性
<div>总价为;{{total}}</div>
3.3 mutations 类似methods,但是只能使用同步方法,使用方法:在methods中使用。第一个参数是state
mutations:{
addItem(state,value){
state.data.push(value);
}
}
3.3.1 先引入
import {mapMutations} from 'vuex'
3.3.2 在methods中使用
3.3.3 使用mutations里面的属性
<div @click="add">添加</div>
data(){
return{
item:{
name:'运动鞋',color:'白色',price:'45'
}
}
}
methods:{
...mapMutations(['addItem']),
add(){
this.addItem(this.item)
}
}
3.3.4 注意:
mapMutations是[],里面是函数的名字,调用是this.xxx()
3.4 actions 类似methods,但是只能使用异步方法,使用方法:在methods中使用。第一个参数是context,跟其他的不同!!(后续会说,为什么不同)
context.commit('buy')调用的是mutations中的buy方法
mutations: {
buy (state) {
alert('付款成功')
state.data = []
}
},
actions:{
buy(context){
setTimeout(()=>{
context.commit('buy')
},500)
}
}
3.3.1 先引入
import {mapActions} from 'vuex'
3.3.2 在methods中使用
3.3.3 使用mutations里面的属性
<div @click="buyItem">购买</div>
methods:{
...mapActions(['buy']),
buyItem(){
this.buy()
}
}
3.3.4 注意:
mapMutations是[],里面是函数的名字,调用是this.xxx()
4.vuex模块化
4.1 定义一个A模块
const moduleA = {
state:{},
getters:{},
actions:{},
mutations:{}
}
export default moduleA
4.2 使用
import moduleA from './moduleA'
export default new Vuex.Store({
modules:{
a:moduleA
}
})
4.2.1 state 单独存在于不同的模块中,使用需要先说明使用的模块名字(在这里就是a)
...mapState({
data:state=>state.a.data
})
4.2.2 getters 属于公共模块,第一个参数为state(当前模块下的),第二个getters(可以调用其他的getters方法),第三个参数 rootstate(指所有模块下的state,调用时需要rootstate.b.data)。不同模块下的getters不可以同名,否则会报错!
getters:{
getName(state,getters,rootstate){
return state.data[0].name+rootstate.a.data[1].name
}
}
...mapGetters(['getNum'])
<div>{{getNum}}</div>
4.2.3 mutations 属于公共模块,可以重名,只不过重名的都会使用一遍。第一个参数是state,作用于当前模块
mutations:{
addItem (state, item) {
state.data.push(item)
}
}
//使用方法,跟正常使用一样
...mapMutations(['addItem'])
this.addItem(item)
4.2.4 actions使用方法跟mutations一样,但是参数不一样。context这里包含了state,rootstate,getters,actions,mutations
打印context的值就可以得到上面,当都在a模块内时,上面红色框内是一样的值
actions: {
buy (context) {
console.log('111', context.rootState.a.data)
}
}
...mapAcions(['buy'])
buyItem(){
this.buy()
}
OK,以上就是vuex的使用方法了。如果觉得有帮助,请帮忙点个赞哦!如果有建议的,欢迎指出来!