vuex

VUEX到底是什么？

vuex 是一个专门为vue.js应用程序开发的状态管模式

• 这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

}


export default new Vuex.Store({
    state
})

接下来，在main.js中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

vuex官方给了我们一个更简单的方式来使用vuex,也就是{mapState, mapMutations, mapActions, mapGetters}

vuex有module,主要用于多模块开发，例如在store.js中

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './module'  //引入module

Vue.use(Vuex)

let store = new Vuex.Store({
  modules,
  state:{},
  getters:{},
  mutations:{},
  actions:{},
})

export default store;

• module.js中

import dxw from "./dxw/index";
import gift from './gift'   //子模块
import message from './message'     //子模块
import share from './share'     //子模块

export default {
    gift,
    message,
    dxw,
    share
}

• gift.js

import axios from 'axios'
import fn from '../../../until'

const gift = {
    namespaced: true,   //命名空间
    state: {
        gift_list: [],
    },
    mutations: {
        get_list(state, action) {
            action.forEach(item=>{
                item.date = new Date(item.time*1).toLocaleString()
            })
            state.gift_list = action
        },
    },
    actions: {
        async get_giftList({ commit }, action) {    //获取数据
            let data = await axios.get('/api/list')
            commit('get_list', data.data.user)
        },
        
    }

}

export default gift

• 在自己的组件中引入方法

methods: {
    ...mapActions("gift", ["get_giftList",'delGift']), //注意必须写gift如果你使用了命名空间
    ...mapMutations("gift", ["bases"]),
    }