vuex的簡單使用

2021-08-29 20:24:30 字數 1547 閱讀 2568

專案結構

一、建立store

建立分割成模組（module）的state

專案**中建立store資料夾，同時建立index.js，在modules中定義userinfo這個state

index.js

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


import userinfo from './modules/userinfo.js';//引入某個store物件


//store物件模組


export default new vuex.store(


})
在store資料夾建立moudle資料夾，用於存放不同模組的state，下面建立userinfo.js這個state，state裡面可以定義屬於該state的getter、actions、mutations等函式

userinfo.js

// initial state


const state = 


// getters


const getters = 


}// actions


const actions = {}


// mutations


const mutations = 


}export default
二、把建立store引入到main.js中先導入store

import store from './store/index' //引入store
完整**

main.js

// the vue build version to load with the `import` command


// (runtime-only or standalone) has been set in webpack.base.conf with an alias.


import vue from 'vue'


import element from 'element-ui'


import 'element-ui/lib/theme-chalk/index.css'


import router from './router'


import store from './store/index' //引入store


vue.config.productiontip = false


vue.use(element, )


/* eslint-disable no-new */


new vue()

vuex的簡單使用

使用了 vue lic腳手架 我不說得很理論，我就說得很通俗 在store檔案下面寫成 index.js是載入全部 下面是 modules檔案下的wallet.js export default getters mutations actions src 這是index.js import vue ...

vuex 簡單的使用

首先是專案目錄結構 我的vuex的目錄是這樣的，簡單說一下每個js檔案的作用吧 首先是 index.js 檔案 這個檔案主要配置 vuex 的入口及檔案的配置 import vue from vue import vuex from vuex vue.use vuex import state fr...

vuex的簡單使用

1,vuex是專為vue.js設計的狀態管理模式,集中儲存和管理應用程式中所有元件的狀態,適用於中大型單頁應用 2,使用vuex的第一步 引入 import vue from vue import vuex from vuex vue.use vuex 同樣需要在main.js中引入store im...