vuex的基本用法

初接触vuex觉得里面的mapState、mapMutations、mapActions超级难懂，看官方的文档觉得太官方，难以理解，遂自己再学习了一遍。

mapState、mapMutations、mapActions的用法是基本相同的，理解了其中一个，理解其他的也会很快

vuex的基础用法

安装了vuex   npm install vuex --save

在main.js文件中引用

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

新建一个store.js文件

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state={
    money:2,
    count:1
}
const mutations={
    add:function(state){
        state.count++;
        state.money+=2;
    },
    reduce:function(state){
        state.count--;
        state.money-=2;
    }
}
const actions={
    add:({commit})=>{
        commit('add')
    },
    reduce:({commit})=>{
        commit('reduce')
    }
}
export default new Vuex.Store({
    state,
    actions,
    mutations
})

mapState的用法

我对于这一块的内容也是幡然醒悟，如果没有引入mapState，在项目中需要使用$state.state.money。使用了mapState之后，将state的数据放在computed中去进行监听

import {mapState} from 'vuex'
computed:{
            ...mapState([
                'money',
                'count'
            ])
},

这样引入后在项目中直接使用money.直接插值。

<div>{{money}}</div>

mapMutation的基本用法

如果没有引入MapMutation的话，调用store里面的函数需要这样使用：

<button @click="add1">增加</button>

add1:function(){
                var _this = this;
                _this.$store.commit('add')
                console.log(_this.$store)
                // _this.$store.
},

使用后：

import {mapMutations} from 'vuex'
methods: {
            ...mapMutations({
                'add':'add',
                'reduce':'reduce'
            }),
}

这样可以直接使用：

<button @click="add">增加</button>

mapActions的用法相同

同时也可以将本地存储联系起来，这样数据就不会在刷新的时候重置

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state={
    money:localStorage.money || 2,
    count:1
}
const mutations={
    add:function(state){
        state.count++;
        state.money+=2;
        localStorage.money=state.money
    },
    reduce:function(state){
        state.count--;
        state.money-=2;
        localStorage.money=state.money
    }
}
const actions={
    add:({commit})=>{
        commit('add')
    },
    reduce:({commit})=>{
        commit('reduce')
    }
}
export default new Vuex.Store({
    state,
    actions,
    mutations
})