Vuex 用法

Vuex简单的来说就是vue项目中的属于状态管理的插件。
因为项目中也有用到，下面我说下具体用法。当然很简单的啦。
这是我这边的目录结构

image.png

第一步当然是引入。

import Vuex from 'vuex';
import  store from './store/store';
Vue.use(Vuex);
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App)
});

第二步分别看下我的四个文件 store.js action.js getters.js mutation.js 中分别写了些什么

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './action';
import getters from './getters';
Vue.use(Vuex);
const state = {
    startTime:'',//日历result的时间
    endTime:'',//时间
    searchTitle:'',//在index页面搜索的内容
};

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

mutation.js 复制操作

export default{
    
    SET_StartTime(state,startTime){
        state.startTime = startTime;
    },
    SET_EndTime(state,endTime){
        state.endTime = endTime;
    },
    SET_SearchTitle(state,searchTitle){
        state.searchTitle = searchTitle;
    }
}

getters.js get函数

export default{
    getStartTime:(state) => state.startTime,
    getEndTime:(state)=> state.endTime,
    getSearchTitle:(state) => state.searchTitle,
    
}

action.js 异步提交。 vuex中更改状态只能是这样。

export default{

    setStartTime({commit},startTime){
        commit('SET_StartTime',startTime);
    },
    setEndTime({commit},endTime){
        commit('SET_EndTime',endTime);
    },
    setSearchTitle({commit},searchTitle){
        commit('SET_SearchTitle',searchTitle);
    }

}

第三步，如何来用。

存值
      this.$store.dispatch('setStartTime',startDate);
      this.$store.dispatch('setEndTime',endDate);
取值
     this.$store.getters.getSearchTitle;