[Vuex系列] - 初嘗Vuex第一個例子

王小端coder發表於2019-04-21
Vue

Vuex是什麼？

Vuex是一個專為vue.js應用程式開發的狀態管理庫。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的程式碼將會變得更結構化且易維護，這就是 Vuex 背後的基本思想。

Vuex安裝和引入

  1. 安裝Vuex依賴包 npm install vuex --save

  2. 在專案中引入Vuex。在src目錄下，新建一個store資料夾，用來存放vuex相關檔案。

[Vuex系列] - 初嘗Vuex第一個例子

  3. 在stroe資料夾下新建store.js檔案，用來引入vuex。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store()
export default store

複製程式碼
   4. 在main.js裡面引入store，進行全域性注入
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 使用store
  components: { App },
  template: '<App/>'
})

複製程式碼

如何在專案中宣告Vuex

  • 我們建立一個state

state是單一狀態樹，用一個物件就包含了全部的應用層級狀態。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的過程中也能輕易地取得整個當前應用狀態的快照。

  1. 在store資料夾下新建state.js檔案，存放state變數state.js檔案內容如下
const state = {
  num: 0
}
export default state
複製程式碼
  • 建立一個mutations

更改vuex的store中的狀態的唯一方法是提交mutation。vuex中的mutation非常類似於事件：每個mutation都有一個字串的事件型別(type)和一個回撥函式(handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數。

  1. 在store資料夾下新建mutations.js,存放mutattions內容，mutations.js檔案內容如下
import state from './state'

const mutations = {
  addNum () {
    state.num++
  }
}

export default mutations
複製程式碼
  • 建立一個getters

vuex允許我們在store中定義“getter”（可以認為是store的計算屬性）。就像計算屬性一樣，getter的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算

  1. 在store資料夾下新建getters.js,存放getters內容，getters.js檔案內容如下
import state from './state'

const getters = {
  getNum () {
    return state.num
  }
}

export default getters

複製程式碼
  • 建立一個actions

Action類似於mutation，不同在於：Action提交的是mutation，而不是直接變更狀態。Action 可以包含任意非同步操作。Action函式接受一個與store例項具有相同方法和屬性的context物件，因此你可以呼叫context.commit提交一個 mutation，或者通過context.state和context.getters來獲取state和getters。

  1. 在store資料夾下新建actions.js,存放actions內容，actions.js檔案內容如下
const actions = {
  addNumAction (context, num) {
    context.commit('addNum', num)
  }
}

export default actions

複製程式碼
  • 在store.js中註冊state,mutations,gatters,actions
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

export default store

複製程式碼

如何在元件中使用Vuex

在src資料夾下新建views資料夾，在views資料夾下新建vuex資料夾，並在vuex資料夾新建index.vue檔案

[Vuex系列] - 初嘗Vuex第一個例子

index.vue檔案的內容

<template>
  <div class="app">
    <p>{{ num }}</p>
    <button @click="addNumAction">+ADD</button>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapState([
      'num'
    ])
  },
  methods: {
    ...mapActions([
      'addNumAction'
    ]),
    ...mapGetters([
      'getNum'
    ])
  }
}
</script>

複製程式碼
  1. 配置路由
import Vue from 'vue'
import Router from 'vue-router'
import VueX from '@/views/vuex/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/vuex',
      name: 'vuex',
      component: VueX
    }
  ]
})複製程式碼


最終效果

[Vuex系列] - 初嘗Vuex第一個例子


一、[Vuex系列] - 初嘗Vuex第一個例子

二、[Vuex系列] - 細說state的幾種用法

三、[Vuex系列] - Mutation的具體用法

四、[Vuex系列] - getters的用法

五、[Vuex系列] - Actions的理解之我見

六、[Vuex系列] - Module的用法（終篇）


相關文章