vue基礎入門之vuex安裝與使用
本教程為入門教程,如有錯誤,請各位前端大佬指出。
1.什麼是vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化.詳細介紹可以參照官網文檔vuex.vuejs.org/zh/
下面簡單介紹vuex
2.安裝和引入
先安裝vuex。
npm install vuex --save
在main.js中引入後即可使用。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //vuex使用 import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //全局變量 count: 31231 } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //vuex必須加入 store, components: { App }, template: '<App/>' })
3.vuex的使用
<template> <div> 老大有{{showData}} <HelloWorld2/> </div> </template> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", cou } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.state.count; } } } </script>
<template> <div> 老二有{{$store.state.count}} </div> </template> <script> export default { name: 'HelloWorld2', data() { return { } } } </script>
4.流程介紹
如圖當沒有使用vuex時流程為: view->actions->state->view
使用瞭vuex後流程為vuecomponent->(dispatch)actions->(commit)mutations->(mutate)state->(render)->vuecomponent
5.mutation
狀態更改,更改 Vuex 的 store 中的狀態的唯一方法是提交mutation。Vuex 中的 mutation 非常類似於事件:每個 mutation 都有一個字符串的事件類型 (type)和一個回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方,並且它會接受 state 作為第一個參數。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //vuex使用 import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //全局變量 count: 31231 }, //更改狀態方法 mutations: { //state為上面的state addData(state) { // 變更狀態 state.count++ } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //vuex必須加入 store, components: { App }, template: '<App/>' })
然後執行更改
<template> <div> 老大有{{showData}} <HelloWorld2/> <button type = "button" v-on:click = "changeData"> 修改按鈕 </button> </div> </template> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.state.count; } }, methods: { //執行更改 changeData(event){ this.$store.commit("addData"); } } } </script>
6.getters過濾
可以限制mutation 比如小於0就不能減少瞭
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //vuex使用 import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //全局變量 count: 0 }, //更改狀態方法 mutations: { //state為上面的state addData(state) { // 變更狀態 state.count++ } }, //過濾 getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //vuex必須加入 store, components: { App }, template: '<App/>' })
調用時
<template> <div> 老二有{{$store.getters.getState}} </div> </template> <script> export default { name: 'HelloWorld2', data() { return { } } } </script>
7.Action–異步處理
Action 類似於 mutation,不同在於:
Action 提交的是 mutation,而不是直接變更狀態。 Action 可以包含任意異步操作。 mutation隻能同步處理
main.js。示例如下:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //vuex使用 import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //全局變量 count: 0 }, //更改狀態方法 mutations: { //state為上面的state addData(state) { // 變更狀態 state.count++ } }, //過濾 getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: { //action觸發的mutations方法 優勢是異步處理 addData(context) { //模擬異步 setTimeout(() => { context.commit('addData') }, 1000) } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //vuex必須加入 store, components: { App }, template: '<App/>' })
在發送時 應該調用action。
<template> <div> 老大有{{showData}} <HelloWorld2/> <button type = "button" v-on:click = "changeData"> 修改按鈕 </button> </div> </template> <script> import HelloWorld2 from './HelloWorld2' import son from './son' export default { name: 'HelloWorld', data () { return { message2:"", } }, components:{ HelloWorld2, son },computed: { showData(){ return this.$store.getters.getState; } }, methods: { //執行更改 changeData(event){ //操作mutations方法 //this.$store.commit("addData"); //應該操作action而不是action觸發的mutations方法 this.$store.dispatch("addData"); } } } </script>
8.Module
由於使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。
為瞭解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割:
如路由可以分割文件 不在main.js中放入vuex 新建store/index.js
//vuex使用 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //全局變量 count: 0 }, //更改狀態方法 mutations: { //state為上面的state addData(state) { // 變更狀態 state.count++ } }, //過濾 getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: { //action觸發的mutations方法 優勢是異步處理 addData(context) { //模擬異步 setTimeout(() => { context.commit('addData') }, 1000) } } })
修改main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //vuex必須加入 store, components: { App }, template: '<App/>' })
我們還能把main.js中的state拿出 新建store/state.js
export default { count: 0 }
然後index.js可以改成
//vuex使用 import Vue from 'vue' import Vuex from 'vuex' import state from './state' Vue.use(Vuex) export default new Vuex.Store({ state: state, //更改狀態方法 mutations: { //state為上面的state addData(state) { // 變更狀態 state.count++ } }, //過濾 getters: { getState(state) { if (state.count >= 5) { return 5 } else { return state.count } } }, actions: { //action觸發的mutations方法 優勢是異步處理 addData(context) { //模擬異步 setTimeout(() => { context.commit('addData') }, 1000) } } })
總結
到此這篇關於vue入門之vuex安裝與使用的文章就介紹到這瞭,更多相關vuex安裝與使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!