vue狀態機vuex的使用


VUEX官方文檔介紹:Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。

那么我們在自己的vue項目中如何應用呢,下面我將分享一下自己在開發中的實際應用

首先我們要安裝vuex,執行命令:npm i vuex --save

然后創建一個store文件價,在文件夾下面創建一個store.js,如圖所示:

接下來就是具體的應用了,在store.js中寫自己的代碼,下面我將附上自己的代碼

寫好store.js之后在main.js中引入,使掛在到vue實例上,才能夠在組建中拿到store,下圖是掛在store

最后就是在具體組建中對state中的數據進行操作了,比如我們在ajax請求成功之后給state負值(這里涉及到的是改變state的狀態,因此我前面已經在mutations中對state做了改變,並在actions中對這一改變做了提交,具體的負值就要在具體的組建中應用了),首先我們要引入mapActions,具體代碼如下:

其次就是執行action:

這樣之后state里面的unseinfo就發生了改變,如果我們要在某個組建中使用這個數據,具體代碼:

 

到此一個簡單的vuex應用的實例就完成了,如果大家喜歡,記得多多關注,我將不定期的更新一些知識。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM