1、概述

Vuex作為插件，管理和維護整個項目的組件狀態。

?

2、安裝vuex

cnpm i --save vuex

?

3、vuex使用

github地址：https://github.com/MengFangui/Vuex

new Vue({el: '#app',router: router,//使用vuex store: store,render: h => {return h(App)} });

?

4、配置項

（1）數據：數據保存在state中。store的數據只能讀取，不能改變。

（2）改變store中的數據使用mutations。組件內通過this.$store.commit來執行mutations.

（3）getters：提取過濾方法。

（4）actions：處理異步操作，組件內通過this.$store.dispatch觸發。

涉及數據改變的用mutations，涉及業務邏輯的使用actions。

以上整體配置為：

//vuex的配置 //注意Store是大寫 const store = new Vuex.Store({//數據保存 state: {count: 0,list: [1, 5, 8, 10, 30, 50]},mutations: {increase(state, n = 1) {state.count = n;},decrease(state, n = 1) {state.count -= n;}},getters: {filteredList: state => {return state.list.filter(item => item < 10);}},actions:{asyncIncrease(context){//異步 1s后執行return new Promise(resolve=>{setTimeout(()=>{context.commit('increase');//Promise 的一種狀態Resolved（已完成） resolve();},1000)})}} });

?

5、組件代碼

<template><div><h1>首頁</h1>{{count}}<button @click="handleIncrease"> 5</button><button @click="handleDecrease">-5</button><!--getters 用法--><div>{{list}}</div><!--actions用法--><button @click="handleAsyncIncrease">action 1</button><!--router-link會渲染為一個a標簽 實現跳轉的方式1--><!--router-link 的tag屬性 指定渲染成什么標簽--><!--router-link 的replace屬性 不會留下history記錄，不能使用后退鍵--><!--router-link 的active-class屬性 路由匹配成功時會自動給當前元素設置為一個名為router-link-active的class--><router-link to="/about">跳轉到 about</router-link></div> </template> <script>export default {computed:{count(){return this.$store.state.count;},list(){return this.$store.getters.filteredList;}},methods:{handleIncrease(){this.$store.commit('increase',5);},handleDecrease(){this.$store.commit('decrease',5);},handleAsyncIncrease(){this.$store.dispatch('asyncIncrease').then(()=>{console.log(this.$store.state.count)});}}} </script>

?

vuex 維護多個組件之間的公共（共有）狀態！

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vue 状态管理 Vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。