1.安裝配置vuex锨用，版本依賴(lài)

vue2的項(xiàng)目使用vuex3，vue3的項(xiàng)目使用vuex4

npm install vuex --save 這個(gè)指令默認(rèn)安裝Vuex4

npm install vuex@3 @代表安裝指定版本的Vuex3

2.創(chuàng)建 store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 全局都可以使用的數(shù)據(jù)
  state: {
  },
  // getters, 相當(dāng)于對(duì)state里的數(shù)據(jù)進(jìn)行運(yùn)算得到的數(shù)據(jù) 類(lèi)似于computed對(duì)于data的處理
  getters: {
  },
  // mutations候味，定義修改state里面數(shù)據(jù)的方法
  mutations: {
  },
  // actions用法--actions中的方法觸發(fā)mutations中的方法從而改變state里的數(shù)據(jù);
  // 除此之外滥酥，如果需要異步操作剩岳，就必須在actions中執(zhí)行
  actions: {
  },
  // 將同一類(lèi)型的數(shù)據(jù)組合成一個(gè)模塊
  modules: {
  }
})

3捐康、Vuex的基本使用

Vuex實(shí)現(xiàn)了一個(gè)單向數(shù)據(jù)流仇矾，在全局擁有一個(gè)State存放數(shù)據(jù)，所有修改State的操作必須通過(guò)Mutation進(jìn)行解总，Mutation的同時(shí)提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新贮匕。所有異步接口需要走Action，常見(jiàn)于調(diào)用后端接口異步獲取更新數(shù)據(jù)花枫，而Action也是無(wú)法直接修改State的刻盐，還是需要通過(guò)Mutation來(lái)修改State的數(shù)據(jù)。最后劳翰，根據(jù)State的變化敦锌，渲染到視圖上。Vuex運(yùn)行依賴(lài)Vue內(nèi)部數(shù)據(jù)

1,$store.state

通過(guò)這個(gè)方式佳簸，能直接使用state里的數(shù)據(jù)

    <i>msg:{{$store.state.msg}}</i>
    <p>num:{{$store.state.num}}</p>

2乙墙、mutations

要想修改state的數(shù)據(jù)必須通過(guò)mutations

  在store/index.js中配置 
  // mutations，定義修改state里面數(shù)據(jù)的方法
  mutations: {
    updateMutationMsg (state) {
      state.msg = '修改之后的msg數(shù)據(jù)'
    }
  },

  //在  .vue的文件中使用
  methods: {
    updateStoreMsg () {
    // 組件methods通過(guò)調(diào)用vuex實(shí)例的commit方法觸發(fā)mutations中的方法修改msg
      this.$store.commit('updateMutationMsg')
    }
  },

3溺蕉，action

所有異步接口需要走Action,然后調(diào)用mutations中的方法伶丐，更改state中的數(shù)據(jù)

配置

  actions: {
    // actions方法中觸發(fā)mutations中的方法
    async actionUpdateNum (c, val) {
      const res = await axios.get('http://47.100.227.25:3000/books/queryall')
      // 觸發(fā)vuex實(shí)例mutations中的指定方法updateMutaNum
      c.commit('updateMutaNum', res[0].id)
    }
  }

使用

  methods: {
    // 組件methods中通過(guò)vuex實(shí)例的dispatch方法觸發(fā)vuex中actions里的方法，
    updateNum (val) {
      this.$store.dispatch('actionUpdateNum', val)
    }
  },

4.getters

  // getters, 相當(dāng)于對(duì)state里的數(shù)據(jù)進(jìn)行運(yùn)算得到的數(shù)據(jù) 類(lèi)似于computed對(duì)于data的處理,需要返回值
  getters: {
    numDouble (state) {
      return state.num * 2
    }
  },

5疯特，modules

將相關(guān)的數(shù)據(jù)處理作為一個(gè)模塊

  modules: {
    hh: msgModule
  }
  
  
const msgModule = {
   // 全局都可以使用的數(shù)據(jù)
  state: {
  },
  // getters, 相當(dāng)于對(duì)state里的數(shù)據(jù)進(jìn)行運(yùn)算得到的數(shù)據(jù) 類(lèi)似于computed對(duì)于data的處理
  getters: {
  },
  // mutations哗魂，定義修改state里面數(shù)據(jù)的方法
  mutations: {
  },
  // actions用法--actions中的方法觸發(fā)mutations中的方法從而改變state里的數(shù)據(jù);
  // 除此之外，如果需要異步操作漓雅，就必須在actions中執(zhí)行
  actions: {
  },
  // 將同一類(lèi)型的數(shù)據(jù)組合成一個(gè)模塊
  modules: {
  }
}