VUEX 基本用法

首先打開vuex的官方文檔，看看這張圖

mutations是提交修改store的狀態的惟一方法。每一個mutation都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)，回調函數就是咱們改變state的方法。

actions跟mutations差很少，可是action不直接修改state，它是提交到mutation上讓mutation來修改state。要記住mutation是惟一能夠修改state的。actions跟mutation的區別是 mutation必須限定是同步操做，而actions沒有這個限制，若是你須要異步操做或調用異步API，你能夠經過actions來進行操做。

state 其實就是保存狀態的地方。修改了state，頁面會自動更新全部引用到state的內容。

理論上，搞懂上面的就能夠進行一些基本的操做了。

因此接下來就是進行一些簡單的例子

首先咱們須要安裝vuex

npm install vuex --save
npm install es6-promise --save //作兼容，vuex依賴於promise，部分瀏覽器沒有實現的promise，沒錯，就是萬惡之源IE.....
複製代碼

由於若是項目有必定規模以後，若是全部store都寫在單組件文件上，會顯得很亂很蛋疼，不方便維護管理。因此咱們能夠在src目錄下建立一個store目錄，專門用於管理狀態。在store目錄下建立index.js

import Vue from 'vue'
import 'es6-promise/auto' //引用依賴
import Vuex from 'vuex'

Vue.use(Vuex) //使用vuex插件
複製代碼

當項目比較大規模的時候，全部的東西都寫在index上也會顯得很臃腫。因此咱們再繼續建立兩個文件。state.js用於保存狀態，mutation.js用來改變狀態。而後在index.js導入這兩個js文件。而後導出store

import Vue from 'vue'
import 'es6-promise/auto'   //引用依賴
import Vuex from 'vuex'
import state from './state'  //引用同目錄下的state.js
import mutations from './mutations'  //引用同目錄下的mutations.js

Vue.use(Vuex) //使用vuex插件

export default new Vuex.Store({
  state,
  mutations
})
複製代碼

好比在頁面上你須要保存你的登陸名，你能夠在state.js上這麼寫

let defaultUsername = '未登陸'  //定義一個默認的名字
//部分瀏覽器不支持localStorage會拋出異常，因此咱們須要用try catch來獲取異常，這樣就不報異常了。
try {
  if (localStorage.userName) {   //localSrorage是HTML5的新東西，能夠將數據保存在本地，相似於cookie，可是保存時間是永久
    defaultUsername = localStorage.userName
  }
} catch (e) {}

export default{
  userName: defaultUsername    //導出userName到index.js
}
複製代碼

在mutation.js上這麼寫

export default{
  changeUsername (state, userName) {  //改變userName的方法 ，userName是頁面傳過來的參數。
    state.userName = userName  //改變state中的userName
    try {
      localStorage.userName = userName  //本地存儲userName
    } catch (e) {}
  }
}
複製代碼

寫到這裏突然想起好像沒說爲啥要用localStorage......由於js是運行在內存中，頁面F5刷新以後內存被釋放而後從新加載js代碼，因此這時你的vuex的數據也會被清除....因此你須要用localStorage去進行本地存儲一下

寫完了store以後改怎麼在頁面上使用。

在入口文件main.js中導入store，必定要記得導入，否則誰認識你store是哪位

import store from './store/index.js'
複製代碼

而後還要註冊一下

new Vue({
  el: '#app',
  router,
  store,  //引用
  components: { App },
  template: '<App/>'
})
複製代碼

這樣咱們才能夠在頁面上引用

//調用state裏面的userName
  <div>{{this.$store.state.userName}}</div>
複製代碼

剛纔咱們已經在mutation上定義好了一個改變state中userName的方法changeUsername 咱們能夠在方法中調用

...
methods: {
    change (userName) {
        this.$store.commit('changeUsername', userName)  //commit是調用mutation的方法，同理dispatch是調用action的方法，能夠看看上面那張圖
    }
}
複製代碼

這樣就使用了vuex來管理狀態了。

還有一種更加方便的方法去調用這些方法數據

在組件中引入

import { mapState } from 'vuex'

export default{
    ... //省略
    computed: {
    ...mapState(['userName'])
  },
}
複製代碼

這樣咱們就能夠直接在頁面上引用,不須要每次都寫又長又臭的this.$store.state.userName

<div>{{this.userName}}</div>
複製代碼

同理mutation也同樣

import { mapState, mapMutations } from 'vuex'

export default{
    ... //省略
    methods: {
    change (userName) {
        this.changeUsername(userName)
    },
    ...mapMutations(['changeUsername'])
  },
}
複製代碼

vuex中還有兩個屬性 getter和 module

Getter屬性跟computed計算屬性差很少。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。這是一個官方的例子

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
複製代碼

引用

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
複製代碼

Module屬性是將store分紅多個模塊,防止store由於應用變得很是複雜時，store變得很是臃腫 官方例子

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製代碼

這樣你能夠將一種或者一類狀態歸爲一個store進行分開管理，這樣十分方便維護。

以上就是我我的對vuex的一些基本用法的總結