從好看的學妹那收集的好看照片--🍉sunday🍉

前言

上篇文章說了vuex的簡單原理，這篇就著重講講如何使用簡單的vuex，看看它到底有何優秀之處吧。

我們要使用Vuex，使用流程大致是不是就是下面這幾步呢？

npm

Vue.use()

store

另外就是讓所有vc都能夠訪問到store

一、安裝

npm安裝

npm install vuex --save

如果我們直接使用vue腳手架創建項目，可以在創建時就直接選擇安裝 vuex。

二、入門使用及案例

第二步就是引入vuex,使用插件了。

import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex'Vue.config.productionTip = false Vue.use(Vuex)const vm =new Vue({store: {},render: h => h(App), }).$mount('#app') console.log(vm)

按照以前使用插件的過程，這樣理論上是已經完成了。

但是我在后面還輸出了vm，這還有玄機的。

可以看到在 Vue 中的實例上已經有$store 啦，但是在原理圖中，底下還有三個對象。

我們在mian.js是不合適的，我們通常會提取出來，另外建立一個文件夾叫stroe，大家的習慣，也不是說啥規范吧。

我們在index.js中寫

//引入Vue核心庫 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應用Vuex插件 Vue.use(Vuex)//準備actions對象——響應組件中用戶的動作 const actions = {} //準備mutations對象——修改state中的數據 const mutations = {} //準備state對象——保存具體的數據 const state = {}//創建并暴露store export default new Vuex.Store({actions, // actions:actions, 由es6語法，變量名和對象名相同，可以簡寫 為 actions。mutations,state })

然后我們在main.js中進行引入

import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({render: h => h(App),store }).$mount("#app")

接下來就是如何使用它啦。

就是簡單做了一個點擊自加的案例

index.js

//引入Vue核心庫 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應用Vuex插件 Vue.use(Vuex)//準備actions對象——響應組件中用戶的動作 const actions = { // context 在這里就是 上下文的意思 必須要填寫的參數 這里不好說，大家可以打印出來看看increment(context,value) {console.log(context)context.commit("INCREMENT",value)} } //準備mutations對象——修改state中的數據 // 這里方法名大寫也只是一種開發習慣，不能說是規范吧，為了能夠讓人明顯分析出是調用了mutations const mutations = {INCREMENT(state,value) { state.sum+=value} } //準備state對象——保存具體的數據 const state = {sum: 0, }//創建并暴露store export default new Vuex.Store({actions,mutations,state })

寫了一個Sum組件

<template><div><!-- 用這種太長了，所以可以寫成一個計算屬性，稍微方便些，后面有更加方便的方法 --><h1>{{ $store.state.sum }}</h1><h1>{{ sum }}</h1><button @click="increment">點擊自加</button></div> </template> <script> export default {computed:{sum(){return this.$store.state.sum}},methods: {increment(){this.$store.dispatch("increment",1)// 也可以直接與 mutations 通信// this.$store.commit('INCREMENT') }} } </script>

組件中讀取vuex中的數據：$store.state.sum

我這里用了計算屬性。后面會有更加方便的方法。

組件中修改vuex中的數據：$store.dispatch('action中的方法名',數據) 或 $store.commit('mutations中的方法名',數據)

備注：若沒有網絡請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit

<template><div id="app"><Sum></Sum></div> </template> <script> import Sum from './components/Sum.vue' export default {name: 'App',components: {Sum} } </script>

實現效果

三、getters的使用

概念：當state中的數據需要經過加工后再使用時，可以使用getters加工。

在store.js中追加getters配置

const getters = {bigSum(state){return state.sum * 10} } //創建并暴露store export default new Vuex.Store({actions,mutations,state,getters })

在組件中的使用方式$store.getters.bigSum 或者用計算屬性，會更好一點點。

<template><div><h1>{{ sum }}</h1><!-- <h1>展示一下sum的十倍是多少 {{ $store.getters.bigSum}}</h1> --><h1>展示一下sum的十倍是多少 {{ bigSum }}</h1><button @click="increment">點擊自加</button></div> </template> <script> export default {computed:{sum(){return this.$store.state.sum},bigSum(){return this.$store.getters.bigSum}},methods: {increment(){this.$store.dispatch("increment",1)}} } </script>

效果：

在其他任意組件中都可以這么取值，所以說是vuex實現了任意間組件通信

不過我們每次這么手寫計算屬性，而且代碼是這么相似，難道沒有什么簡單的方式嗎？？？

有的有的，點這點這👉 vuex進階 （😁）

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vuex 基本使用及案例，快速上手，学会使用vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。