我對vuex的了解(一)

1、安裝vue-cli腳手架

2、初始化

• src目錄下建立一個store檔案并建立一個store.js檔案
• 引入vue和vuex并顯式的通過Vue.use(Vuex)來安裝Vuex

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
           

3、建立

• 建立一個state對象（資料源），用于存放資料
• 建立一個mutations對象，用于修改狀态
• 注冊并暴露，讓外部可以引用

//store.js檔案
//state
const state = {
    count: 0
}
//mutations
const mutations = {
    increment: state => state.count++,
    decrement: state => state.count--
}
//注冊、暴露
export default new Vuex.Store({
    state,
    mutations
})
           

4、建立一個新的子元件（或者你可以把模闆自帶的App.vue内容删了後直接用）

• 編寫<tempalte/>内容

<template>
  <div>
     <p>{{count}}</p>
     <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
     </p>
  </div>
</template>
           

• import引入store.js
• 定義computed計算屬性和methods方法

import store from '@/store/store'

  export default {
     //注冊store
      store,
      name: 'app',
      computed: {
          count() {
              return store.state.count
          }
      },   
      methods: {
          increment() {
              store.commit("increment")
          },
          decrement() {
              store.commit("decrement")
          }
      }
  }
           

上面有幾個知識點：

  1. 由于vuex的狀态存儲是響應式的，從store執行個體中擷取狀态最簡單的方法就是在計算屬性中傳回某個狀态。

  2. 通過store.state來擷取狀态對象，通過store.commit方法觸發狀态變更。

  3. 我這裡的store是直接注冊在了這個子元件中， Vuex 通過 store 選項，提供了一種機制将狀态從根元件『注入』到每一個子元件中,也就是說如果你在根元件裡注冊了store選項，那麼子元件用this.$store就能通路到了。

以上就是官網上那個示例具體到項目中的的簡單實作了。

參考:

https://router.vuejs.org/zh-cn/installation.html