vuex的基础和进阶

这两天做项目用到了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的使用方法了。如果觉得有帮助，请帮忙点个赞哦！如果有建议的，欢迎指出来！