VueX使用干貨

vuex簡介

Vuex是一個為Vue.js應用程序開發的狀態管理模式

- 采用集中式存儲管理應用的所有組件的狀態，并且相應的規則保證狀態以一種可預測的方式發生變化
- Vuex也集成到Vue的官方調試工具 devtools extension，提供了注入令配置的time-travel調試，狀態快照導入導出功能
狀態管理是什么：

- 可以簡單的將其看成把需要的多個組件共享的變量全部存儲在一個對象里面
- 然后將這個對象放在頂層的Vue實例中，讓其他組件可以使用
- 那么，多個組件就可以共享這個對象中的所有變量屬性了
- 簡單來說就是多個組件需要共享一個狀態(或者是變量)，那么這個狀態放在哪個組件中都不合適，那么就單獨的new一個對象，把這個對象看作是一個管家，來管理這些共享的狀態信息
有什么狀態時需要多個組件共享：
- 如果一個項目，存在多個界面共享問題
- 比如用戶的登陸狀態，用戶名稱，頭像，地理位置信息，商品收藏，購物車中的物品等等
- 這些狀態信息，都可以放在統一的地方，對它進行保存和管理，而且它們還是響應式的

Vuex 安裝

命令行安裝

npm install vuex --save

在src文件夾下創建 store文件夾，在該文件夾下創建 index.js文件，其中寫入：

import Vue from "vue";
import Vuex from "vuex"
//1. 安裝插件
Vue.use(Vuex);//2. 創建vuex對象
const store = new Vuex.Store({
  state: {},  mutations: {},  actions: {},  getters: {},  modules: {}})//3. 導出story對象
export default store;

在main.js文件中引入vuex對象

import Vue from 'vue'
import App from './App'
import router from './router'
//引入 vuex 的store對象
import store from "./store";
Vue.config.productionTip = falsenew Vue({  el: '#app',
  router,  store,  render: h => h(App)})

通過 mutation 修改vuex管理的狀態

要修改vuex管理的狀態必須通過mutation
index.js文件

import Vue from "vue";
import Vuex from "vuex"
//1. 安裝插件
Vue.use(Vuex);//2. 創建vuex對象
const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態
    counter: 10
  },  mutations: {//定義方法用于修改vuex管理的狀態
    increment(state){      state.counter++;    },    decrement(state){      state.counter--;    }  },  actions: {},  getters: {},  modules: {}})//3. 導出story對象
export default store;

App.vue文件

<template>
<div id="app">
  <h3>{{$store.state.counter}}</h3>
  <!--操作vuex管理的狀態-->
  <button @click="addition">+</button>
  <button @click="subtration">-</button>
  <hr>
  <hello-vuex/>
</div>
</template>
<script>
    import HelloVuex from "./components/HelloVuex";
    export default {
      name: 'App',
      components:{
        HelloVuex
      },
      methods:{
        addition(){
          //通過mutation修改被vuex管理的狀態
          this.$store.commit('increment')
        },
        subtration(){
          //commit()傳入的是在index.js中mutations中定義的方法名
          this.$store.commit('decrement')
        }
      }
    }
</script>

具體描述
- 提取出一個公共的store對象，用于保存多個組件中共享的狀態
- 將store對象放置在 new Vue對象中，這樣可以保證在所有的組件中都可以使用到
- 在其他組件中使用store對象中保存的狀態即可
  - 通過 this.$store.屬性 的方式來訪問狀態
  - 通過 this.$store.commit('mutation方法名') 來修改狀態
注意事項：
- 通過提交 mutation的方式，而非直接改變 store.state.屬性
- 這是因為Vuex可以更明確的追蹤狀態的變化，所以不要直接改變store.state.counter 的值

vuex Getters 的使用

有時候，需要從store 中獲取一些state 變異后的狀態
在組件中需要拿到 store中的數據，而且這個數據是需要變化后才給到組件或者頁面的時候，這時就需要永高getters
抽取出的vuex的index.js配置文件

import Vue from "vue";
import Vuex from "vuex"
//1. 安裝插件
Vue.use(Vuex);
//2. 創建vuex對象
const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    //這里定義的是state中變化后的內容
    more20stu(state){
      return state.students.filter(s => s.age > 20);
    }
  }
})
//3. 導出story對象
export default store;

<template>
<div id="app">
  <p>getters中定義的powerConter內容----</p>
  <h3>{{$store.getters.powerConter}}</h3>
  <p>通過getters 中的more20stu 獲取state中age大于20的對象---</p>
    <!--通過getters拿到變化后的store中的內容-->
  	{{$store.getters.more20stu}}</div>
</template>
<script>
export default {
  name: 'App',
}
</script>

getters作為參數和傳遞參數

作為參數

以上面的代碼為例，如果需要拿到 {{$store.getters.more20stu}} 獲取的學生的個數
在getters中定義的函數還可以傳入第二個參數

import Vue from "vue";
import Vuex from "vuex"
//1. 安裝插件
Vue.use(Vuex);
//2. 創建vuex對象
const store = new Vuex.Store({
  state: {
    counter: 10,
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    more20stu(state){
      return state.students.filter(s => s.age > 20);
    },
    //傳入的第二個參數代表就是當前對象中的getters
    more20stuLenthg(state,getters){
      return getters.more20stu.length;
    }
  },
})
//3. 導出story對象
export default store;

<template>
<div id="app">
  <p>通過getters 中的more20stu 獲取state中age大于20的對象---</p>
  {{$store.getters.more20stu}}  <p>getters 作為參數</p>
  <h3>{{$store.getters.more20stuLenthg}}</h3>
</div>
</template>
<script>
export default {
  name: 'App'
}
</script>

傳遞參數

getters默認是不能傳遞參數的，如果希望傳遞參數，那么只能讓getters本身返回另一個函數
要獲取年齡大于 age的stu對象，age由外部傳遞進來

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態
    counter: 10,
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    //獲取年齡大于 age 的學生，這個Age不是寫死的，而且別的地方傳入進來的
    moreAgeStu(state) {
        //返回一個函數
      return function (age) {
        return state.students.filter(s => s.age > age);
      }
    }
  }
})
//3. 導出story對象
export default store;

<template>
<div id="app">
  <p>getters 傳遞參數----</p>
    <!--傳入一個22給getters中定義的方法，這個方法返回一個函數，這個22就是函數的參數-->
  <p>{{$store.getters.moreAgeStu(22)}}</p>
</div>
</template>
<script>
export default {
  name: 'App'
}
</script>

mutainons 攜帶參數

vuex的store狀態的更新唯一方式是：提交Mutations
mutations主要包括兩部分
字符串的事件類型(type)
一個回調函數(handler) ，該回調函數的第一個參數就是state
mutations的定義方式：

mutations: {
    increment(state){        state.count++;    }}

通過mutations更新

increment: function(){
    this.$stote.commit('increment')
}

之前的mutations改變counter是每次 ++ 或者 --，現在需要每次點擊按鈕 + 多少 -多少由外部傳入

mutations: {
    // 第二個參數是外部傳入的
    incrementCount(state,count){
        state.counter += count;
    }
},

<template>
<div id="app">
  <p>mutations 傳遞參數----</p>
  <h4>{{this.$store.state.counter}}</h4>
  <button @click="addCount(5)">+5</button>
  <button @click="addCount(10)">+10</button>
</div>
</template>
<script>
export default {
  name: 'App'
  methods:{
    addCount(count){
        //提交，并傳入參數
      this.$store.commit('incrementCount',count);
    }
  }
}
</script>

mutitaions傳遞參數就是在提交comiit的時，commit的第二個參數就是傳遞給mutations的參數

mutitaions 傳入多個參數

多個參數使用一個對象傳入

addStu(){
      const stu = {id: 5, name: 'alan', age:30};
      this.$store.commit('addSutdent',stu);
}

mutations提交風格

之前通過commit進行提交是一種普通的方式
Vue還提供了另外一種風格，它是一個包含type屬性的對象，被稱為mutations負載(payload)

addCount(count){
    //普通的提交風格    //this.$store.commit('incrementCount',count);
    //特殊的提交風格    this.$store.commit({
        type: 'incrementCount',
        count    })},

mutations: {//定義方法用于修改vuex管理的狀態
    incrementCount(state,payload){
      state.counter += payload.count;
    }
}

mutations響應規則

vuex的store中的state是響應式的，當state中的數據發生改變時，vue組件會自動更新
這就要求必須遵守一些vuex對應的規則
- 提前在store中初始化好所需的屬性
- 當給state中的對象添加新屬性時，使用下面的方式
  - 方式一：使用 Vue.set(obj, 'newProp', 123)
  - 方式二：用新對象給舊對象重新賦值
給state中定義好的對象添加屬性

<template>
<div id="app">
  <p>store.state.info的內容是否是響應式的-------</p>
  <button @click="updateInfo">修改 info</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
export default {
  name: 'App',
  methods:{
      //修改info對象，并且是響應式的
    updateInfo(){
      this.$store.commit('updateInfo')
    }
  }
}
</script>

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態  
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {//定義方法用于修改vuex管理的狀態
   //通過Vue.set(obj, key, value) 響應式的修改info的信息
    updateInfo(state){      Vue.set(state.info, 'addr', '重慶');
    }  }  })export default store;

給state中定義好的對象刪除屬性

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {//定義方法用于修改vuex管理的狀態
    deleteInfo(state){      //刪除屬性該方式做不到響應式
      // delete state.info.name;
      Vue.delete(state.info, 'name');
    }  } })export default store;

mutation常量類型

在mutation中，自定義了很多事件類型(也就是其中的方法名稱)
當項目增大時，vuex管理的狀態越來越多，需要更新狀態的情況越來越多，那么意味著mutation中的方法越來越多
方法過多，使用者需要花費大量的精力去記住這些方法，甚至是多個文件之間來回切換，查看方法名稱，甚至如果不是復制的時候，可能還會出現寫錯的情況
這時候可以在store文件夾下創建一個js文件用于保存常量

export const INCREMENT = 'increment';
export const INCREMENTCOUNT = 'incrementCount';
export const DECREMENT = 'decrement';
export const ADDSTUDENT = 'addSutdent';
export const UPDATEINFO = 'updateInfo';
export const DELETEINFO = 'deleteInfo';

然后再index.js文件中引入這些常量，并修改mutations中的方法名為 :

import Vue from "vue";
import Vuex from "vuex"// 引入這些常量import {  INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'Vue.use(Vuex);const store = new Vuex.Store({  state: { //定義被vuex管理的各個狀態    counter: 10,    students: [      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ],
    info: {      name: 'xiaoyouxin',      age: 25,      height: 1.75    }  },  mutations: {     //修改方法名為 ： [常量](){} 的方式
    [INCREMENT](state) {
      state.counter++;    },    [DECREMENT](state) {
      state.counter--;    },    [INCREMENTCOUNT](state,payload){
      state.counter += payload.count;    },    [ADDSTUDENT](state,stu){
      state.students.push(stu);    },    [UPDATEINFO](state){
      Vue.set(state.info, 'addr', '重慶');    },    [DELETEINFO](state){
      Vue.delete(state.info, 'name');    }  }})export default store;

在組件中使用這些常量

<template>
<div id="app">
  <p>mutations 傳遞參數----</p>
  <h4>{{this.$store.state.counter}}</h4>
  <button @click="addCount(5)">+5</button>
  <button @click="addCount(10)">+10</button>
  <p>mutations 傳遞參數2----</p>
  <button @click="addStu">添加學生</button>
  {{$store.state.students}}  <p>store.state.info的內容是否是響應式的-------</p>
  <button @click="updateInfo">修改 info 添加屬性</button>
  <h2>{{$store.state.info}}</h2>
  <button @click="deleteInfo">修改 info 刪除屬性</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
  import HelloVuex from "./components/HelloVuex";
    //引入常量
  import {
    INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
  } from "./store/mutations-types"
export default {
  name: 'App',
  methods:{
    addCount(count){
      this.$store.commit({
        type: INCREMENTCOUNT,  
        count
      })
    },
    addStu(){
      const stu = {id: 5, name: 'alan', age:30};
        //使用常量作為commit提交的參數
      this.$store.commit(ADDSTUDENT,stu);
    },
    updateInfo(){
        //使用常量作為commit提交的參數
      this.$store.commit(UPDATEINFO)
    },
    deleteInfo(){
      this.$store.commit(DELETEINFO);
    }
  }
}
</script>
<style>
</style>

Action 基本定義

通常情況下Vuex要求mutation中的方法必須是同步方法
- 主要原因是當我們使用devtools時，devtools可以幫助我們捕捉mytations的快照
- 但是如果是異步操作，那么devtools將不能很好的追蹤這個操作由什么時候被完成
如果有些情況下，確實需要在vuex中進行一些異步操作，比如網絡請求，必然時異步的，這時候使用Action，Action類似于mutations，但是是來替代mutations進行異步操作的
用法，在組件中需要異步修改state中的屬性
- $this.store.dispatch('Action中的函數名')
- Action中定義的異步函數內部通過mutitaons修改state中的屬性

import Vue from "vue";
import Vuex from "vuex"
import {
  INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定義被vuex管理的各個狀態
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {    [UPDATEINFO](state){      Vue.set(state.info, 'addr', '重慶');
    }  },  actions: {      //在actions中定義的函數中異步調用mutations中的方法
    aUpdateInfo(context){      setTimeout(() => {
        context.commit(UPDATEINFO)      },1000)
    }  }})export default store;

<template>
<div id="app">
  <button @click="updateInfo">修改 info 添加屬性</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
  import {
    INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
  } from "./store/mutations-types"
export default {
  name: 'App',
  methods:{
    updateInfo(){
        //通過 dispatch的方式對state中的屬性進行異步操作
      this.$store.dispatch('aUpdateInfo')
    }
  }
}
</script>

注意： action傳遞參數的方式根mutitaions的方式一致

modules 的使用

vue使用單一狀態樹，那么也意味著很多狀態都會交給vuex來管理
當應用變得非常復雜時，store對象就有了能變得相當臃腫
為了解決這個問題，vuex允許將store分割成模塊，而每個模塊都擁有自己的state，mutations，actions，gettets等
定義在模塊中的東西使用方式和之前是一樣的，不做過多筆記
不過getters中定義的函數除了 state，getters之外還可呢傳入第三個參數 rootState，這個參數表示之前沒有用模塊分割的哪個state，可以從這個參數中取出原本定義好的屬性
還有一個就是在modules中的cations中定義的函數commit的時候是針對于自己這個模塊中的mutations的

項目結構

當vuex管理過多內容時，好的項目結構可以使代碼更加清晰
- index.html
- main.js
- api
  - ... 抽取出的API請求
- components
  - App.vue
  - ...
- store
  - index.js 組裝模塊并導出store的地方
  - actions.js 根級別的 action
  - mutations.js 根級別的mutation
  - modules
    - cart.js 購物車模塊
    - user.js 用戶模塊