Vuex中的核心方法

什麼情況下可以使用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