1.安裝配置vuex，版本依賴

vue2的項目使用vuex3，vue3的項目使用vuex4

npm install vuex --save 這個指令默認安裝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, 相當于對state里的數(shù)據(jù)進行運算得到的數(shù)據(jù) 類似于computed對于data的處理
  getters: {
  },
  // mutations，定義修改state里面數(shù)據(jù)的方法
  mutations: {
  },
  // actions用法--actions中的方法觸發(fā)mutations中的方法從而改變state里的數(shù)據(jù);
  // 除此之外，如果需要異步操作，就必須在actions中執(zhí)行
  actions: {
  },
  // 將同一類型的數(shù)據(jù)組合成一個模塊
  modules: {
  }
})

3、Vuex的基本使用

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

1,$store.state

通過這個方式，能直接使用state里的數(shù)據(jù)

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

2、mutations

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

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

  //在  .vue的文件中使用
  methods: {
    updateStoreMsg () {
    // 組件methods通過調(diào)用vuex實例的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實例mutations中的指定方法updateMutaNum
      c.commit('updateMutaNum', res[0].id)
    }
  }

使用

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

4.getters

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

5，modules

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

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