[TOC] >[參考](https://uniapp.dcloud.io/vue-vuex) ## vuex ### 優勢與使用場景 1. Vuex的狀態存儲是響應式的，可跟蹤每一個狀態變化，一旦它改變，所有關聯組件都會自動更新相對應的數據。 2. 共享數據，解決了非父子組件的消息傳遞（將數據存放在state中）。 3. 統一狀態管理，減少了請求次數，有些情景可以直接從內存中的state獲取數據。 示例 1.在 uni-app 項目根目錄下，新建 store 目錄，在此目錄下新建 index.js 文件。在 index.js 文件配置如下 ``` <!-- 頁面路徑：store/index.js --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex);//vue的插件機制 //Vuex.Store 構造器選項 const store = new Vuex.Store({ state:{//存放狀態 "username":"foo", "age":18 } }) export default store ``` 2.在`main.js`中導入文件。 ``` <!-- 頁面路徑：main.js --> import Vue from 'vue' import App from './App' import store from './store' Vue.prototype.$store = store // 把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件 const app = new Vue({ store, ...App }) app.$mount() ``` ## 獲取state三種方式 1.通過屬性訪問，需要在根節點注入 store 。 ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <text>用戶名：{{username}}</text> </view> </template> <script> import store from '@/store/index.js';//需要引入store export default { data() { return {} }, computed: { username() { return store.state.username } } } </script> ``` 2. 在組件中使用，通過 this.$store 訪問到 state 里的數據。 ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <text>用戶名：{{username}}</text> </view> </template> <script> export default { data() { return {} }, computed: { username() { return this.$store.state.username } } } </script> ``` 3. 通過 mapState 輔助函數獲取。 - 當一個組件需要獲取多個狀態的時候，將這些狀態都聲明為計算屬性會有些重復和冗余。 為了解決這個問題，我們可以使用 mapState 輔助函數 幫助我們生成計算屬性，讓你少按幾次鍵： ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <view>用戶名：{{username}}</view> <view>年齡：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: mapState({ // 從state中拿到數據 箭頭函數可使代碼更簡練 username: state => state.username, age: state => state.age, }) } </script> ``` - 當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。 ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <view>用戶名：{{username}}</view> <view>年齡：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: mapState([ 'username',//映射 this.username 為 store.state.username 'age', ]) } </script> ``` - 為了能夠使用 this 獲取組件自己的data數據，必須使用常規函數。 ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <view>用戶名：{{username}}</view> <view>年齡：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return { firstName:"Li" } }, computed: { ...mapState({ username: function (state) { return this.firstName + ' ' + state.username }, age: state => state.age, }) }, } </script> ``` - 使用對象展開運算符 mapState 函數返回的是一個對象。使用對象展開運算符將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性。極大地簡化寫法： ``` <!-- 頁面路徑：pages/index/index.vue --> <template> <view> <view>用戶名：{{username}}</view> <view>年齡：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: { //使用對象展開運算符將此對象混入到外部對象中 ...mapState({ username: state => state.username, age: state => state.age, }) }, } </script> ```