最近在學習vuejs,一直有據說vuex,用來實現多組件共享的一種狀態管理模式,可是網上都說,不要爲了用vuex而用vuex,大概意思就是儘可能少用vuex,一些小項目能夠用bus來實現組件之間的傳值問題。雖說不用vuex,但至少要知道這是個什麼東西吧?還要學會怎麼用。趁如今有點時間,彌補本身的不足。一些概念性的東西,仍是看官方文檔吧。Vuex2.0。html
咱們先來看看官網的一張關於Vuex的圖vue
Vuex規定,屬於應用層級的狀態只能經過Mutation中的方法來修改,而派發mutation中的事件只能經過action來進行。vuex
咱們能夠從上圖很直觀的看到,數據流是單向的,從左到右,從組件出發,組件中調用action,在action這一層,咱們能夠和後臺數據交互,而後在action中去派發mutation,mutation去觸發狀態的改變,狀態改變觸發視圖的更新。npm
下面直接用例子來認識一下vuex。app
1、搭建一個vue框架框架
2、安裝Vuex函數
npm install vuex --save學習
3、主要修改的文件目錄spa
4、Counter.vue文件3d
<template> <div id="app"> Count is {{$store.state.count}}//使用 <button @click="increment">+5</button> <button @click="decrement">-3</button> </div> </template> <script> // 引入mapActions,很重要 import { mapGetters, mapActions } from 'vuex' export default{ computed: mapGetters([//與vuex中的getters關聯 ]), methods: mapActions([//與vuex中的actions關聯 'increment', 'decrement' ]) } </script>
5、建立一個vuex文件夾,文件夾裏面建立一個store.js文件(關鍵)
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 首先聲明一個狀態 state const state = { count: 0 } // 而後給 actions 註冊事件處理函數,當這個函數被觸發時,將狀態提交到 mutaions中處理 const actions = { increment: ({ commit }) => commit('increment'), // 提交到mutations中處理 decrement: ({ commit }) => commit('decrement') } // 更新狀態 const mutations = { increment (state) { state.count = state.count + 5 }, decrement (state) { state.count = state.count - 3 } } // 獲取狀態信息 const getters = { } // 下面這個至關關鍵了,全部模塊,記住是全部,註冊才能使用 export default new Vuex.Store({ state, mutations, actions, getters })
6、要在main.js聲明全局
7、在index.js中對Counter.vue設置路由
8、實現的效果
以上就是一個很簡單的一個計數的例子,對vuex有了一個小小的認識,可是對【state,mutations,actions,getters,modules】這幾個狀態的用法還不是很明確?後段時間,仍是繼續用例子來加深對他們的理解。
實例二
上面的例子,我是把【state,mutations,actions,getters,modules】這幾個狀態放在store.js這個文件內,如今就把這幾個拆開爲幾個文件,加深理解。
1、目錄結構
2、Counter.vue的配置,主要標紅的地方實例一的區別
3、store的入口文件index.js的配置
import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as actions from './actions' import * as mutations from './mutations' Vue.use(Vuex) // 首先聲明一個狀態 state const state = { count: 0 } // 下面這個至關關鍵了,全部模塊,記住是全部,註冊才能使用 const store = new Vuex.Store({ state, getters, actions, mutations }) export default store
4、actions.js文件的配置
//actions 註冊事件處理函數,當這個函數被觸發時,將狀態提交到 mutaions中處理 export const increment = ({ commit }) => commit('increment') export const decrement = ({ commit }) => commit('decrement')
傳參時的配置
5、mutations.js文件配置
// 狀態值的改變方法,操做狀態值
// 提交mutations是更改Vuex狀態的惟一方法 export const increment = state => { state.count = state.count + 5 } export const decrement = state => {
傳參時的配置
6、getters.js的配置
export const count = state => state.count
7、main.js和路由index.js的配置
8、實現效果
好了。對vuex有了更深的一層理解。可是這還遠遠還不夠。接下來就是在項目中用vuex實現登陸,保存用戶信息。
謝謝yuwenjing的分享:http://www.cnblogs.com/yuwenjing0727/p/7205577.html