vuex的使用

Vue中的vuex和React中的redux 都被稱爲狀態管理機制。

理解：在state中定義了一個數據之後，可以在所在項目中的任何一個組件裏進行獲取、進行修改，並且此次修改可以得到全局的響應變更。

1、安裝vuex

$ npm install vuex --save

2、在src下新建文件夾store，store文件夾下新建js文件index.js，如下

3、在新建的index.js文件中，導入如下配置

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

//創建倉庫對象
let store = new Vuex.Store({
  state:{},
  getters:{},
  mutations:{},
  actions:{}
});

export default store;

4、在main.js中引入store，如下

5、在App.vue文件中使用這四個輔助函數的時候，需要先在script標籤內引入，如下

6、在App.vue文件中的computed使用...Vuex.mapState();  ...Vuex.mapGetters();   

                                     methods使用...Vuex.mapMutations();   ...Vuex.mapActions();

7.在App.vue使用{{}}拿到倉庫中的數據

---

---

倉庫對象的意思爲下：

state裏面存放的是狀態（或者說是數據）

getters裏存放的是對state的數據的過濾

mutations（突變）突變state中的數據（同步操作），一般就是通過mutations去改變state中的值，不會直接操作state中的數據

actions放置異步請求，調用mutations中的方法，進而改變state中的值

例子如下：

在使用vuex時，想要對state中的數據進行更改時，步驟如下：

在actions中進行異步操作（比如調用後臺接口），再調用mutations突變中的方法，去更改state中的數據，並且getters中的值也會同步改變