Vuex系列 初嚐Vuex第乙個例子

2022-09-13 09:57:09 字數 2453 閱讀 1924

vuex是乙個專為vue.js應用程式開發的狀態管理庫。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可**的方式發生變化。

通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的**將會變得更結構化且易維護，這就是 vuex 背後的基本思想。

安裝vuex依賴包 npm install vuex --s**e

在專案中引入vuex。在src目錄下，新建乙個store資料夾，用來存放vuex相關檔案。

3. 在stroe資料夾下新建store.js檔案，用來引入vuex。

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex)


const store = new vuex.store()


export default store
4. 在main.js裡面引入store，進行全域性注入

import vue from 'vue'


import router from './router'


import store from './store/store'


vue.config.productiontip = false


/* eslint-disable no-new */


new vue()
state是單一狀態樹，用乙個物件就包含了全部的應用層級狀態。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的過程中也能輕易地取得整個當前應用狀態的快照。

在store資料夾下新建state.js檔案，存放state變數state.js檔案內容如下

const state = 


export default state
更改vuex的store中的狀態的唯一方法是提交mutation。vuex中的mutation非常類似於事件：每個mutation都有乙個字串的事件型別(type)和乙個**函式(handler)。這個**函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第乙個引數。

在store資料夾下新建mutations.js,存放mutattions內容，mutations.js檔案內容如下

import state from './state'


const mutations = 


}export default mutations
vuex允許我們在store中定義「getter」（可以認為是store的計算屬性）。就像計算屬性一樣，getter的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算

在store資料夾下新建getters.js,存放getters內容，getters.js檔案內容如下

import state from './state'


const getters = 


}export default getters
action類似於mutation，不同在於：action提交的是mutation，而不是直接變更狀態。action 可以包含任意非同步操作。action函式接受乙個與store例項具有相同方法和屬性的context物件，因此你可以呼叫context.commit提交乙個 mutation，或者通過context.state和context.getters來獲取state和getters。

在store資料夾下新建actions.js,存放actions內容，actions.js檔案內容如下

const actions = 


}export default actions



import vue from 'vue'


import vuex from 'vuex'


import state from './state'


import mutations from './mutations'


import getters from './getters'


import actions from './actions'


vue.use(vuex)


const store = new vuex.store()


export default store
在src資料夾下新建views資料夾，在views資料夾下新建vuex資料夾，並在vuex資料夾新建index.vue檔案

index.vue檔案的內容

+add

配置路由

import vue from 'vue'


import router from 'vue-router'


import vuex from '@/views/vuex/index'


vue.use(router)


export default new router(


]})
最終效果

Vuex的乙個易錯點

好長時間不用vuex，發現有些東西記模糊了。在對vuex進行模組化開發的時候，const store new vuex.store 我們可以通過store.state.a取得 modulea 的狀態，在store注入到vue例項的時候，子元件可以通過this.store.state.a取得。但要注意...

python第乙個程式設計 第乙個 Python 程式

簡述 安裝完 python 後，windows 中 開始選單或安裝目錄下就會有 idle 開發 python 程式的基本 ide 整合開發環境 幫助手冊 模組文件等。linux 中 只需要在命令列中輸入 python 命令即可啟動互動式程式設計。互動式程式設計 互動式程式設計不需要建立指令碼檔案，是...

Scrapy系列一 第乙個Scrapy專案

命令列切換到對應的資料夾下 執行命令scrapy startproject qidian hot qidian hot是指專案名 執行完成後資料夾下會建立名為qidian hot的資料夾 注意開啟的目錄，別開啟了下一級的qidian hot目錄 這三個div對應內容裡的具體資訊 spiders資料夾...