vuex與axios結合使用
阿新 • • 發佈:2018-12-12
在vue專案中,元件間相互傳值、後臺獲取的資料需要供多個元件使用的情況,有必要考慮引入vuex來管理這些凌亂的狀態。
首先新需要在專案中安裝vuex:
命令列 npm install vuex - - save - dev
在專案的入口 js 檔案 main.js 中引入
import store from './store';
並將 store 掛載到 vue 上
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
建立store目錄結構(根據需求繁或簡)
store下index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import userStore from './userInfo/'
const store = new Vuex.Store({
modules: {
userStore,
}
})
export default store
userInfo下index.js
import axios from 'axios' const userStore = { state: { user: { name: '', } }, getters: {}, mutations: { setUser(state, payload){ state.user.name = payload }, }, actions: { getName({commit}){ axios.get(url, params) .then(response => { commit("setUser",res.name); }) .catch((error) => { console.log(error) }) } }, //plugins: [createPersistedState()] } export default userStore
使用vuex的元件中進行分發
mounted () { this.$store.dispatch('getName') },
//created或者mounted週期都可以
需要取回 state 的元件中使用 mapState 獲取 state:
import { mapState } from 'vuex';
export default {
...
computed: {
...mapState([
name: state => state.userStore.user.name
])
},
...
}