Kubernetes安裝配置指南

阿新 • • 發佈：2021-01-11

Vuex中的核心方法

Vuex是一個專為Vue.js應用程式開發的狀態管理模式，其採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。每一個Vuex應用的核心就是store倉庫，store基本上就是一個容器，它包含著你的應用中大部分的狀態state。

什麼情況下可以使用Vuex?

如果不打算開發大型單頁應用，應用夠簡單，最好不要使用 Vuex。一個簡單的 store 模式就足夠了。但是，如果需要構建一箇中大型單頁應用，就要考慮如何更好地在元件外部管理狀態，Vuex 是不錯的選擇。

關於`Vuex`的五個核心概念，在這裡可以簡單地進行總結：

state: 基本資料，包含了store

中儲存的各個狀態。
getters: 從基本資料派生的資料，類似於 Vue 中的計算屬性，根據其他 getter 或 state 計算返回值
mutations: 提交更改資料的方法，同步操作；一組方法，是改變store中狀態的執行者，只能是同步操作
actions: 像一個裝飾器，包裹mutations，使之可以非同步。
modules: 模組化Vuex。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment (state, payload) {
      state.count++
    }
  },
  actions: {
    addCount(context) {
      // 可以包含非同步操作
      // context 是一個與 store 例項具有相同方法和屬性的 context 物件
    }
  }
})
// 注入到根例項
new Vue({
  el: '#app',
  // 把 store 物件提供給 “store” 選項，這可以把 store 的例項注入所有的子元件
  store,
  template: '<App/>',
  components: { App }
})
改變狀態

this.$store.commit('increment')

State

單一狀態樹

在Vue元件中獲得Vuex狀態

Vuex 使用 state 來儲存應用中需要共享的狀態。為了能讓 Vue 元件在 state更改後也隨著更改，需要基於state 建立計算屬性。

// 建立一個 Counter 元件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // count 為某個狀態
    }
  }
}

Action與Mutation的區別

Action 類似於 mutation，不同在於：

Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意非同步操作，而Mutation只能且必須是同步操作

mapState輔助函式

mapState函式返回的是一個物件，當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘，為了解決這個問題，我們可以使用mapState輔助函式幫助我們生成計算屬性。

// 在單獨構建的版本中輔助函式為 Vuex.mapState
import { mapState } from "vuex";

export default {
  // ...
  computed: mapState({
    // 箭頭函式
    count: state => state.count,

    // 傳字串引數 count 等同於 state => state.count
    countAlias: 'count',

    // 使用 this
    countPlusLocalState: function(state) {
      return state.count + this.localCount;
    }
  })
  // ...
}

如果當前元件中還有區域性計算屬性需要定義，通常可以使用物件展開運算子...將此物件混入到外部物件中。

import { mapState } from "vuex";

export default {
  // ...
  computed: {
    localComputed: function() { /* ... */ },
    // 使用物件展開運算子將此物件混入到外部物件中
    ...mapState({
      // ...
    })
    // ...
}

案例

 1 <template>
 2   <div class="hello">
 3     <h2>加減法計算器</h2>
 4     <div>
 5         <el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number>
 6     </div>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'HelloWorld',
13   data () {
14     return {
15       num:this.$store.state.num
16     }
17   }
18 }
19 </script>
20 
21 
22 JS檔案
23 import Vue from 'vue'
24 import App from './App'
25 import router from './router'
26 import store from './store'
27 import ElementUI from 'element-ui'
28 import 'element-ui/lib/theme-chalk/index.css'
29 
30 Vue.use(ElementUI)
31 Vue.config.productionTip = false
32 
33 new Vue({
34     el: '#app',
35     router,
36     store,
37     components: { App },
38     template: '<App/>'
39 })
40 
41 store資料夾中的index.js
42 import Vue from 'vue'
43 import Vuex from 'vuex'
44 
45 Vue.use(Vuex)
46 
47 let store = new Vuex.Store({
48     state: {
49         num: 100
50     }
51 })
52 
53 export default store