# vuex的基本使用 概念：是一個專為 Vue.js 應用程序開發的**狀態管理模式**。這里主要是用來方便組件之間聯系 **注意 ： 1.vuex不允許直接在組件中修改store的數據 ，如：this.$store.state.count++ 2.mutations函數中不能寫異步的代碼，如：setTimeOut方法** ## 使用： ``` 獲取數據： 1.this.$store.store.xxx 2.計算屬性：通過引入輔助函數(mapStore)，在計算屬性中獲取數據 觸發方法： 一、同步的方法： 1.this.$store.commit('xxx') 2.通過引入輔助函數(mapMutation)，在methods中獲取觸發函數 二、異步的方法 1.this.$store.dispatch('xxx') 2. 通過引入輔助函數(mapAction)，在methods中獲取觸發函數 ``` #### 在main.js中： **~~不推薦直接在main中引入~~** ``` 安裝： npm install vuex --save 導入： import Vuex from 'vuex' Vue.use(Vuex) ``` ``` 具體使用： 1.新建一個store文件夾，再鍵一個index.js 2.導入vue和vuex：import xx form “xx” 創建store對象： const store = new Vuex.Store({ //state中存放的就是全局共享的數據 state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) 導出：export defult store ``` ``` 導入store：import store from “./store” 將store對象掛載到vue實例中： newVue({ el:'#app', router, store, //store對象，掛載到vue實例中，所有的組件就可以直接從store中獲取全局數據了 render:h=>h(App) }) ``` ## 核心概念 1.State ： 提供唯一的數據源，所有共享的數據都要統一放到Store的State中進行存儲 ① 組件訪問數據的第一種方式：this.$store.state.count (count是state中定義的數據對象中的數據) ② 組件訪問數據的第二種方式 ：通過mapState輔助函數獲取數據，先在組件中引入： import {mapStore} from ‘vuex’, 通過計算屬性，將數據映射到組件中使用：computed:{ ...mapState(['count'])}，此時count在組件中就能使用了,如果這個變量名跟data中有沖突，可以用對象形式：computed:{ ...mapState({"count1" : 'count'})} 2.Mutation : 用來更改state數據的狀態（修改數據），可以集中監控數據的變化 ``` //定義mutations const store = new Vuex.Store({ state: { count: 1 }, mutations: { //定義事件對象，處理數據和邏輯，state就是state對象，作為形參調用 add(state) { // 變更狀態 state.count++ } } }) ``` ① 在組件中觸發mutation 的方式一： a. ``` methods ： { handle1( ){ this.$store.commit("add") //add是方法名，通過commit觸發 } } ``` b. 在組件中觸發mutation 并傳遞參數的方式： ``` //定義mutations const store = new Vuex.Store({ state: { count: 1 }, mutations: { //定義事件對象，處理數據和邏輯，state就是state對象，作為形參調用，step為傳遞的參數 addN(state，step) { // 變更狀態 state.count += step } } }) 組件中傳遞參數并使用： methods ： { handle1( ){ this.$store.commit("addN" ， 3) //add是方法名，通過commit觸發，第二個參數為組件傳遞的參數 } } ``` ② 觸發mutation的第二種方式： 在組件中按需導入mapMutations函數：`import { mapMutations } from 'vuex'` 通過剛才導入的mapMutation函數，將需要的mutations函數，映射為當前組件的methods方法中：`methods ： { ...mapMutations( [ 'add','addN'] )}` ``` //定義mutations const store = new Vuex.Store({ state: { count: 1 }, mutations: { //定義事件對象，處理數據和邏輯，state就是state對象，作為形參調用，step為傳遞的參數 addN(state，step) { // 變更狀態 state.count += step }， sub(state){ state.count-- } } }) 組件中使用： methods : { //將sub方法映射到組件中使用 ...mapMutations(['sub']), handle2( ){ //調用sub方法 this.sub( ) } } ``` **攜帶參數用法和上面一致，添加第二個參數即可** ### 3.Action：用于處理異步任務 ① 觸發actions的第一種方法 ： ``` //定義actions const store = new Vuex.Store({ state: { count: 1 }, mutations: { //定義事件對象，處理數據和邏輯，state就是state對象，作為形參調用，step為傳遞的參數 addN(state，step) { // 變更狀態 state.count += step }， sub(state){ state.count-- } }， actions : { //處理異步操作,1s后執行add方法 addAsync(context){ setTimeOut( ( )=>{ context.commit('add') },1000) } } }) 組件中觸發Action： methods ： { handle( ){ //觸發actions的第一種方式,dispatch方法 this.$store.dispatch('addAsync') } } **如果需要攜帶參數，像上面方法一樣，添加第二個參數即可 ``` ② 觸發actions的第二種方法 ： 在組件中導入mapActions：`import { mapActions from ‘vuex’` ``` 在組件中 ： methods ： { ...mapActions（[ 'addAsync']） // 將方法映射到組件中 //通過事件調用 handle(){ this.addAsync( ) } } ``` ## 4.Getter ： 用戶對store中的數據進行加工處理形成新的數據 Getter可以對Store中已有的數據加工處理之后形成新的數據，類似vue的計算屬性 store中的數據發生變化，Getter中的數據也會跟著變化 ``` 定義Getter 創建store對象： const store = new Vuex.Store({ //state中存放的就是全局共享的數據 state: { count: 0 }, getters ： { showNum ： state =>{ return '當前的數量是【'+ state.count +'】'} } } }) ``` 在組件中使用getter方法一 ： ``` this.$store.getters.showNum(定義的名稱) ``` 在組件中使用getter方法二 ： 在組件中引入mapGetters ： `import {mapGetters} from 'vuex'` 在組件計算屬性中：` computed ： {...mapGetter( ['showNum'] )}` //把屬性映射到組件中使用 :{{showNum}}