一、vuex是什么？
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，
這個狀態(tài)管理應用包含以下幾個部分：
- state，驅(qū)動應用的數(shù)據(jù)源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應在 view 上的用戶輸入導致的狀態(tài)變化。
給出一張官方的“單向數(shù)據(jù)流”理念的簡單示意：?
?每一個 Vuex 應用的核心就是 store（倉庫）?！皊tore”基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) (state)。
Vuex 和單純的全局對象有以下兩點不同：
- Vuex 的狀態(tài)存儲是響應式的。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應的組件也會相應地得到高效更新。(也就是所謂的MVVM)
- 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit)
看官網(wǎng)的一張圖，更加方便能看懂：
?如果理解了這張圖，你就能知道vuex的工作原理了！
?需要注意的點：
- 改變狀態(tài)的唯一途徑就是提交
mutations- 如果是異步的，就派發(fā)(dispatch)
actions，其本質(zhì)還是提交mutations- 怎樣去觸發(fā)
actions呢？可以用組件Vue Components使用dispatch或者后端接口去觸發(fā)- 提交
mutations后，可以動態(tài)的渲染組件Vue Components
覺得是不是少了什么，沒錯，就是getters?下面原理實現(xiàn)的時候會說?
二、實現(xiàn)原理
1.準備工作
先npm i store 下載vuex插件，然后在mian.js中引入，如下：
?mian.js代碼：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import { Button, Card } from 'element-ui'
Vue.use(Button)
.use(Card)
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
Vue.prototype.$http = axios
// // 注冊 會自動將所有組件注冊為全局組件
// Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store, // 掛載到vue實例上，這樣全部的組件都可以使用store
render: h => h(App)
}).$mount('#app')
?store文件下的index.js代碼：
import Vue from 'vue'
import Vuex from 'vuex'
import item from './modules/item'
import cart from './modules/cart'
import VuexPersistence from 'vuex-persist'
// 緩存部分數(shù)據(jù)
const vuexLocal = new VuexPersistence({
storage: window.localStorage,
reducer: state => {
return {
item: state.item
}
}
})
/*
storage屬性的值應該是一個對象
三個方法
setItem(key, v)
getItem(key)
removeItem
*/
Vue.use(Vuex)
// 初始化 vuex 倉庫實例
const store = new Vuex.Store({
strict: true,
state: {
num: 5000
},
modules: {
item,
cart
},
plugins: [vuexLocal.plugin]
})
export default store
?store文件下modules文件下的cart.js
import axios from 'axios'
export default {
namespaced: true, //命名空間
state: {
num: 10,
items: []
},
mutations: {
ADD_NUM (state, n) {
state.num += n
},
REDUCE_NUM (state, n) {
state.num -= n
},
INIT_ITEMS (state, items) {
state.items = items
}
},
actions: {
FETCH_ITEMS ({ commit }, params = {}) {
axios.post('/conner/shop/goods/list/v2', params).then(res => {
if (res.data.code === 0) {
commit('INIT_ITEMS', res.data.data.result)
}
})
}
},
getters: {
doubleNum (state) {
return state.num * 2
}
}
}
這里面運用到了state，?mutations，actions，getters，modules 那這五個屬性分別代表什么意思呢？
?
- state： vuex的基本數(shù)據(jù),用來存儲變量。?
- getter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù),相當于store的計算屬性;getter 的返回值會根據(jù)它的依賴被緩存起來,且只有當它的依賴值發(fā)生了改變才會被重新計算。
- mutation：提交更新數(shù)據(jù)的方法,必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)?。?回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)，提交載荷作為第二個參數(shù)。
- action：和mutation的功能大致相同,不同之處在于:
- ?Action 提交的是 mutation,而不是直接變更狀態(tài);
- ?Action 可以包含任意異步操作。
- modules：模塊化vuex,可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰,管理更為方便。
使用下面這兩種方法存儲數(shù)據(jù)：
dispatch：異步操作，寫法： this.$store.dispatch(‘mutations方法名’,值)
commit：同步操作，寫法：this.$store.commit(‘mutations方法名’,值)文章來源：http://www.zghlxwxcb.cn/news/detail-501700.html
總結(jié)
使用vuex一共大致可以分為五步文章來源地址http://www.zghlxwxcb.cn/news/detail-501700.html
- 下載? ? ? ? ? npm i store -S
- 引入? ? ? ? ?import Vuex from 'vuex'
- 注冊? ? ? ? ?Vue.use（Vuex）
- 實例化? ? ??const store = new Vuex.Store({? //寫配置? ?})
- 掛載到vue實例? ??new Vue({
? store, // 掛載到vue實例上，這樣全部的組件都可以使用store
? render: h => h(App)
}).$mount('#app')
?
到了這里，關(guān)于vuex 的基本用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
