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

時間 2019-12-07

標籤 vuex 系列第一個例子简体版

原文原文鏈接

Vuex是什麼？

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

經過定義和隔離狀態管理中的各類概念並經過強制規則維持視圖和狀態間的獨立性，咱們的代碼將會變得更結構化且易維護，這就是 Vuex 背後的基本思想。vue-router

Vuex安裝和引入

安裝Vuex依賴包 npm install vuex --savevuex
在項目中引入Vuex。在src目錄下，新建一個store文件夾，用來存放vuex相關文件。npm

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是單一狀態樹，用一個對象就包含了所有的應用層級狀態。單一狀態樹讓咱們可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照。緩存

在store文件夾下新建state.js文件，存放state變量state.js文件內容以下

const state = {
  num: 0
}
export default state
複製代碼

建立一個mutations

更改vuex的store中的狀態的惟一方法是提交mutation。vuex中的mutation很是相似於事件：每一個mutation都有一個字符串的事件類型(type)和一個回調函數(handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。bash

在store文件夾下新建mutations.js,存放mutattions內容，mutations.js文件內容以下

import state from './state'

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

export default mutations
複製代碼

建立一個getters

vuex容許咱們在store中定義「getter」（能夠認爲是store的計算屬性）。就像計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算app

在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。異步

在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文件函數

index.vue文件的內容post

<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>

複製代碼

配置路由

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
    }
  ]
})複製代碼

最終效果