安裝 Vuex 可以通過 npm 安裝,命令為:
npm install vuex --save-dev
值得注意的是,必須啟用模塊化構(gòu)建才能使用 Vuex,因此需要使用 Vue CLI 來創(chuàng)建項目,并且選擇“Manually select features”的選項中勾選“Vuex”。如果已經(jīng)創(chuàng)建好了項目,需要手動安裝 Vue CLI,并且在 package.json 文件的 dependencies 選項中添加“vuex”依賴,并執(zhí)行“npm install”進行安裝。
安裝完之后,需要在 main.js 文件中引入并注冊 Vuex,代碼如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
接著,需要創(chuàng)建一個 store 對象來存儲應(yīng)用程序的狀態(tài),代碼如下:
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
在上面的代碼中,我們通過 state 對象來存儲應(yīng)用程序的狀態(tài)。mutations 是存儲狀態(tài)改變的方法對象,其中 increment 方法用于增加 count 狀態(tài)的值。
要在 Vue 組件中使用 store 中的狀態(tài),需要使用 computed 屬性來監(jiān)聽狀態(tài)的變化。在組件中,我們可以使用 $store.state.count 來獲取 count 狀態(tài)的值:
export default { computed: { count () { return this.$store.state.count } } }
上面代碼中的 computed 屬性中的 count 方法將監(jiān)聽 $store.state.count 的變化,然后將其返回給模板。
對于 mutations 方法的調(diào)用,我們可以使用 store.commit() 方法進行調(diào)用,代碼如下:
store.commit('increment')
上面代碼中的 'increment' 是 mutations 方法的名稱,通過 commit 調(diào)用 mutations。在組件中,我們可以使用 $store.commit() 來調(diào)用 mutations 方法:
export default { methods: { increment () { this.$store.commit('increment') } } }
上面代碼中的 increment 方法通過 $store.commit() 方法調(diào)用了 mutations 中的 increment 方法。
最后,需要在應(yīng)用程序的入口文件(如 main.js)中將 store 對象傳遞給 Vue 實例,代碼如下:
new Vue({ store, render: h =>h(App) }).$mount('#app')
上面代碼中,我們通過 store 屬性將 store 對象傳遞給 Vue 實例,并在 $mount() 方法中執(zhí)行了掛載操作,將實例渲染到指定的 DOM 元素上。