# vuex的基本使用
概念:是一個專為 Vue.js 應用程序開發的**狀態管理模式**。這里主要是用來方便組件之間聯系
**注意 :
1.vuex不允許直接在組件中修改store的數據 ,如:this.$store.state.count++
2.mutations函數中不能寫異步的代碼,如:setTimeOut方法**
## 使用:
```
獲取數據:
1.this.$store.store.xxx
2.計算屬性:通過引入輔助函數(mapStore),在計算屬性中獲取數據
觸發方法:
一、同步的方法:
1.this.$store.commit('xxx')
2.通過引入輔助函數(mapMutation),在methods中獲取觸發函數
二、異步的方法
1.this.$store.dispatch('xxx')
2. 通過引入輔助函數(mapAction),在methods中獲取觸發函數
```
#### 在main.js中:
**~~不推薦直接在main中引入~~**
```
安裝:
npm install vuex --save
導入:
import Vuex from 'vuex'
Vue.use(Vuex)
```
```
具體使用:
1.新建一個store文件夾,再鍵一個index.js
2.導入vue和vuex:import xx form “xx”
創建store對象:
const store = new Vuex.Store({
//state中存放的就是全局共享的數據
state: { count: 0 },
mutations: {
increment (state) {
state.count++
}
}
})
導出:export defult store
```
```
導入store:import store from “./store”
將store對象掛載到vue實例中:
newVue({
el:'#app',
router,
store, //store對象,掛載到vue實例中,所有的組件就可以直接從store中獲取全局數據了
render:h=>h(App)
})
```
## 核心概念
1.State : 提供唯一的數據源,所有共享的數據都要統一放到Store的State中進行存儲
① 組件訪問數據的第一種方式:this.$store.state.count (count是state中定義的數據對象中的數據)
② 組件訪問數據的第二種方式 :通過mapState輔助函數獲取數據,先在組件中引入: import {mapStore} from ‘vuex’, 通過計算屬性,將數據映射到組件中使用:computed:{ ...mapState(['count'])},此時count在組件中就能使用了,如果這個變量名跟data中有沖突,可以用對象形式:computed:{ ...mapState({"count1" : 'count'})}
2.Mutation : 用來更改state數據的狀態(修改數據),可以集中監控數據的變化
```
//定義mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定義事件對象,處理數據和邏輯,state就是state對象,作為形參調用
add(state) {
// 變更狀態
state.count++
}
}
})
```
① 在組件中觸發mutation 的方式一:
a.
```
methods : {
handle1( ){
this.$store.commit("add") //add是方法名,通過commit觸發
}
}
```
b. 在組件中觸發mutation 并傳遞參數的方式:
```
//定義mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定義事件對象,處理數據和邏輯,state就是state對象,作為形參調用,step為傳遞的參數
addN(state,step) {
// 變更狀態
state.count += step
}
}
})
組件中傳遞參數并使用:
methods : {
handle1( ){
this.$store.commit("addN" , 3) //add是方法名,通過commit觸發,第二個參數為組件傳遞的參數
}
}
```
② 觸發mutation的第二種方式:
在組件中按需導入mapMutations函數:`import { mapMutations } from 'vuex'`
通過剛才導入的mapMutation函數,將需要的mutations函數,映射為當前組件的methods方法中:`methods : { ...mapMutations( [ 'add','addN'] )}`
```
//定義mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定義事件對象,處理數據和邏輯,state就是state對象,作為形參調用,step為傳遞的參數
addN(state,step) {
// 變更狀態
state.count += step
},
sub(state){
state.count--
}
}
})
組件中使用:
methods : {
//將sub方法映射到組件中使用
...mapMutations(['sub']),
handle2( ){
//調用sub方法
this.sub( )
}
}
```
**攜帶參數用法和上面一致,添加第二個參數即可**
### 3.Action:用于處理異步任務
① 觸發actions的第一種方法 :
```
//定義actions
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定義事件對象,處理數據和邏輯,state就是state對象,作為形參調用,step為傳遞的參數
addN(state,step) {
// 變更狀態
state.count += step
},
sub(state){
state.count--
}
},
actions : {
//處理異步操作,1s后執行add方法
addAsync(context){
setTimeOut( ( )=>{
context.commit('add')
},1000)
}
}
})
組件中觸發Action:
methods : {
handle( ){
//觸發actions的第一種方式,dispatch方法
this.$store.dispatch('addAsync')
}
}
**如果需要攜帶參數,像上面方法一樣,添加第二個參數即可
```
② 觸發actions的第二種方法 :
在組件中導入mapActions:`import { mapActions from ‘vuex’`
```
在組件中 :
methods : {
...mapActions([ 'addAsync']) // 將方法映射到組件中
//通過事件調用
handle(){
this.addAsync( )
}
}
```
## 4.Getter : 用戶對store中的數據進行加工處理形成新的數據
Getter可以對Store中已有的數據加工處理之后形成新的數據,類似vue的計算屬性
store中的數據發生變化,Getter中的數據也會跟著變化
```
定義Getter
創建store對象:
const store = new Vuex.Store({
//state中存放的就是全局共享的數據
state: { count: 0 },
getters : {
showNum : state =>{ return '當前的數量是【'+ state.count +'】'}
}
}
})
```
在組件中使用getter方法一 :
```
this.$store.getters.showNum(定義的名稱)
```
在組件中使用getter方法二 :
在組件中引入mapGetters : `import {mapGetters} from 'vuex'`
在組件計算屬性中:` computed : {...mapGetter( ['showNum'] )}` //把屬性映射到組件中使用 :{{showNum}}
- vue項目目錄
- git
- git 使用
- git 新建和合并不同git分支
- vue使用element ui
- vue復選框
- vue使用富文本編輯器
- element 級聯選擇器使用
- vue使用時間過濾器
- vue form表單中使用table表格
- element ui圖片上傳(upload)功能
- 樹形tree組件
- element 表格表頭樣式修改
- element ui添加loading動畫
- table展開列
- el-tooltip提示框加for循環無法顯示數據
- table合并
- table表頭插槽,render-header警告
- table列表中鼠標放上去顯示圖片
- 表格中輸入內容動態改變數據(箭頭和顏色)
- 使用element ui表格跨頁勾選
- 可編輯表格可分頁
- 組件之間簡單傳值
- 從表格中選擇其他表單子段
- router
- vuex
- vue接口寫法
- 將后端返回的數字轉成字符串顯示在表格中
- element ui實現動態驗證
- vue根據token判斷登錄
- vue修飾符
- js小案例
- 倒計時
- 驗證碼
- 帶文字匹配搜索框
- 選項卡
- 復選框全選,反選,全不選
- 相冊選擇,鼠標放到圖片上,對應圖放大顯示
- 敏感詞過濾
- 進度條
- 點擊按鈕回到頂部
- 電影院選座
- 盒子移動
- 鼠標綁定一個盒子
- 檔案建立,輸入信息添加到表格
- 抽獎機
- 放大鏡
- 購物車
- 飛機大戰
- echarts案例
- 常規條形圖
- 橫向條形圖
- 折線圖
- 散點圖
- 餅狀圖
- 地圖
- 雷達圖
- 儀表盤
- 條形堆疊圖
- 微前端--qiankun框架
- node中間件
- 手機端樣式自適應,格式化初始樣式插件
- 簡單的axios請求封裝,無權限
- npm安裝后綴-s或-d
- 系統環境變量
- 過濾字符串,不足兩位前面添加0
- 概念問題
- async和await的區別
- created和mounted區別
- link和@import區別
- 排他算法
- 數組方法
- 數組扁平化
- 數組去重
- 遍歷數組的四種方法
- vue數組中哪些方法時響應式的
- splice刪除數組遇到的坑
- 展開運算符(...)用法
- 冒泡排序
- 判斷數組中是否有重復
- 計算數組中某項出現的次數
- filter方法
- 將數組分割成多個指定長度的數組
- 常用數組方法整合
- 對象數據處理
- 合并對象:Object.assign( )
- Object.keys(),返回數組,自身枚舉對象
- Object.values使用
- Object.entries使用
- vue中使用svg
- svg組件
- vue滑塊驗證
- 方法一:滑塊驗證
- 方法二:滑塊插件
- vue配置不同的啟動和打包環境
- js過濾日期
- js獲取指定日期前一個月日期
- js指定日期與當前日期比較
- js截取字符串
- js截取字符串最后的逗號
- js截取圖片后綴
- 前端監聽網絡
- vue.config.js解析
- 常用正則
- 閉包概念+閉包防抖節流
- vue插槽
- 網絡安全欄
- canvas指紋追蹤技術
- exif照片信息
- xss攻擊
- vue中操作引導
- 封裝全局loading組件
- vue更換主題方案(手動)
- vue項目打包優化
- 組件遞歸案例
- Promise及異步操作介紹
- vue-cli打包的dist文件怎么直接運行
- 瀏覽器頁簽通信(BroadcastChannel)
- nginx配置