Vuex(vue) / Flux (angular) /Redux(react)

vuex 是什么?

狀態管理工具
狀態即數據, 狀態管理就是管理組件中的data數據
Vuex 中的狀態管理工具,采用了 集中式 方式統一管理項目中組件之間需要通訊的數據
[看圖]

如何使用

最佳實踐 : 只將組件之間共享的數據放在 vuex 中, 而不是將所有的數據都放在 vuex 中 ,
也就是說:如果數據只是在組件內部使用的,這個數據應該放在組件中,而不要放在 vuex
vuex 中的數據也是響應式的,也就是說:如果一個組件中修改了 vuex 中的數據,另外一個使用的 vuex 數據的組件,就會自動更新 ( vuex 和 localstorage的區別)

什么時候用 ?

官網
說明: 項目體量很小,不需要使用 vuex, 如果項目中組件通訊不復雜,也不需要使用 vuex
只有寫項目的時候,發現組件通訊多,組件之間的關系復雜,項目已經無法繼續開發了,此時,就應該使用 vuex

Vuex的基本使用

1. vuex的基本使用

引入文件

<script src="vue.js"></script>
<script src="./vuex.js"></script>

使用 vuex 插件

// 和 router 一樣 在工程化項目中  需要使用 use 安裝一下
Vue.use(vuex)

創建 store

const store = new Vuex.Store()

關聯 vm 和 store

const vm = new Vue({store,       // 關聯 storeel: '#app',})

2. state

vuex通過state來提供數據類似于組件的data

創建store的時候，可以指定state

 const store = new Vuex.Store({//1. state 是 vuex 用于提供數據的地方, 類似于組件的data , state中存放的是組件共享的數據//2. 在所有的組件, 都可以通過 this.$store.state 就能夠訪問vuex中state的數據//3. 只要vuex中state的數據發生了變化, 就會更新所有的組件 state: {name: 'hello',money: 1000,},})

可以在任意組件的模板中，訪問到vuex中state的數據

<p>{{ $store.state.name }}</p>
<p>{{ $store.state.money }}</p>

事件中

created() {console.log(this.$store.state.name)console.log(this.$store.state.money)},

3. mutation

####3.1 演示報錯

演示1 - 添加嚴格模式

const store = new Vuex.Store({strict: true,         # 添加嚴格模式state: {name: 'hello',money: 1000,},
})

演示2 : 修改

<p @click="changeName">{{ $store.state.name }}</p>
changeName() {this.$store.state.name = '馬哥'console.log(this.$store.state.name)
},
# 報錯 :    [vuex] do not mutate vuex store state outside mutation handlers."
# 說明 : vuex中的數據不能直接修改, 需要在 mutation 里面才可以修改

3.2 mutation使用

創建store的時候，需要提供mutations

const store = new Vuex.Store({state:{},mutations :{}  # 添加
})

mutation中所有的方法的第一個參數，都是state，可以修改state里面的數據

// vuex 的 store
mutations : {// 修改 namechangeName(state) {state.name = '馬哥'console.log(state.name)},// 修改 moneychangeMoney(state) {state.money++console.log(state.money)},
}

組件中不能直接修改state，但是可以提交mutation，類似于子組件觸發事件

// 在點擊的事件中 觸發事件 =>提交 mutation// 點擊事件
<p @click="changeName">{{ $store.state.name }}</p>
<p @click="changeMoney">{{ $store.state.money }}</p>
// vm 實例中methods: {changeName(state) {this.$store.commit('changeName')},changeMoney(state) {this.$store.commit('changeMoney')},},

4. vuex 傳參

傳參

// 提交 
this.$store.commit('changeName', {name: '6哥',})

接收

// vuex 的 mutations   接收 參數
changeName(state, payload) {state.name = payload.name},

Todos 改造

Todos碼云地址：https://gitee.com/wang_yu5201314/tudos_potato_silk_case

1. 初始化項目

創建項目

vue create vuex-todos

組件化開發
1. 把結構和樣式都拷貝過來并且引入
2. 組件分為三個組件 : TodoHeader TodoList TodosFooter

// App.vue
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";export default {components: {TodoHeader,TodoList,TodoFooter}
};// 結構
<section class="todoapp"><!-- 頭部 --><todo-header></todo-header><!-- 主體 --><todo-list></todo-list><!-- 底部 --><todo-footer></todo-footer></section>

2. 配置 vuex

安裝 vuex :

npm i vuex

創建 store/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)    // 安裝const state = {list: [{ id: 1, name: '吃飯', done: true },{ id: 2, name: '睡覺', done: true },{ id: 3, name: '打豆', done: false },],
}const store = new Vuex.Store({state,
})export default store

Todos 步驟

##1. 列表展示

<li :class="{completed : item.done}" v-for="item in $store.state.list" :key="item.id"><div class="view"><input class="toggle" type="checkbox" checked v-model="item.done" /><label>{{ item.name }}</label><button class="destroy"></button></div><input class="edit" value="Create a TodoMVC template" /></li>

##2. 刪除任務

// vue 注冊點擊刪除事件
del(id) {this.$store.commit("del", { id });
}// vuex  store
// mutations
const mutations = {del(state, playload) {let { id } = playloadstate.list = state.list.filter(v => v.id !== id)},
}

##3. 添加任務

// vue<inputv-model="todoName"                        # ++@keyup.enter="addTodo"                    # ++class="new-todo"placeholder="What needs to be done?"autofocus/>data() {return {todoName: ""                              # ++};},methods: {addTodo() {this.$store.commit("add", {name: this.todoName});this.todoName = "";}}// vuex
const mutations = {// 添加add(state, playload) {state.list.unshift({id: Date.now(),name: playload.name,done: false,})},
}

##4. 修改任務

顯示編輯框

//1. 準備 editId
data() {return {editId: -1};},
//2. 判斷     
<li  :class="{completed : item.done ,editing : item.id === editId }">    
//3. 雙擊顯示showEdit(id) {this.editId = id;}

回車 - 修改數據

// vue
<input class="edit" :value="item.name" @keyup.enter="hideEdit(item.id,$event)" />hideEdit(id, e) {this.$store.commit("updateName", {id,name: e.target.value});this.editId = -1;} // vuex
const mutations = {// 修改nameupdateName(state, playload) {let { id, name } = playloadlet todo = state.list.find(v => v.id === id)todo.name = name},
}

5. 修改狀態

// vue<inputclass="toggle"type="checkbox":checked="item.done"@change="iptChange(item.id,$event)"/>
iptChange(id, e) {console.log(e.target.checked);this.$store.commit("iptChange", {id,checked: e.target.checked});}// vuex// 更新狀態iptChange(state, playload) {let { id, checked } = playloadlet todo = state.list.find(v => v.id === id)todo.done = checked                                  # todo.done},

##6. 計算屬性(三個)

// 計算屬性
const getters = {// 底部的顯示與隱藏isFooterShow(state) {return state.list.length > 0},// 剩余未完成數itemLeftCount(state) {return state.list.filter(v => !v.done).length},// 是否顯示清除已完成isClearCompletedShow(state) {let b = state.list.some(v => v.done)console.log(b)return state.list.some(v => v.done)},
}

##7. 清除已經完成的任務

// vue<!-- 清除已完成 --><buttonclass="clear-completed"@click="$store.commit('clear')"v-show="$store.getters.isClearCompletedShow">Clear completed</button>// vuexclear(state) {state.list = state.list.filter(v => !v.done)},

Action 的使用

官網介紹
Action 類似于 mutation，不同在于：
- Action 可以包含任意異步操作。
- Action 提交的是 mutation，而不是直接變更狀態。
mutaions 里不只能使用同步,不能出現異步 (演示刪除任務里使用setTimeout 會報錯)
演示1: actions 可以包含任意異步操作。代碼1
演示2: actions 不能直接變更狀態 , 代碼2 會報錯
演示3 : actions 提交的是 mutation

// vuethis.$store.dispatch("addAsync", {name: this.todoName});// vuex -  actions
const actions = {// 添加 - 異步// store == contextaddAsync(context, playload) {setTimeout(() => {context.commit('add', playload)}, 3000)},
}// 添加add(state, playload) {state.list.unshift({id: Date.now(),name: playload.name,done: false,})},

幾個輔助函數

1. mapState

當一個組件需要獲取多個狀態的時候，將這些狀態都聲明為計算屬性會有些重復和冗余。

我們可以使用 mapState 輔助函數將 store 中的 state 映射到局部計算屬性

引入 mapState

import { mapState } from "vuex";

數組形式

// 如果本來就是有 計算屬性 computed ,就不能全部使用 mapState 了
// 使用對象展開運算符將 state 混入 computed 對象中
computed: {// ....  之前 vue 里面的getTotal(){}// 維護 vuex...mapState(['list'])},let arr1 = [1,2,3]
let arr = [a,...arr1]let obj1 = { list : [] }
let obj = { name : '馬哥', ...obj1 }

**對象形式 **- 取個名字

computed: {// ....  之前 vue 里面的// 維護 vuex...mapState({l :'list'})},

2. mapGetters

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性

使用展開運算符將 getter 混入 computed 對象中

引入

import { mapGetters } from "vuex";

數組形式

computed: {// .... 之前 vue 的//  維護  vuex// 將  this.isFooterShow  映射為 this.$store.getters.isFooterShow...mapGetters(["isFooterShow", "itemLeftCount", "isClearCompletedShow"])}
// 使用
v-show="isFooterShow"
<strong>{{ itemLeftCount }}</strong> item left

對象形式

如果你想將一個 getter 屬性另取一個名字，使用對象形式

computed: {// .... 之前 vue 的//  維護  vuex...mapGetters(["isFooterShow", "itemLeftCount"]),...mapGetters({// 把 `this.isShow` 映射為 `this.$store.getters.isClearCompletedShow`isShow: "isClearCompletedShow"       //  ==> 起名字 })
}// 使用
<button  v-show="isShow">Clear completed</button>

2. mapMutations

使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）

引入

import { mapState, mapMutations } from "vuex";

數組形式

methods: {// 講 this.del() 映射為  this.$store.commit('del')...mapMutations(['del','showEdit','hideEdit','iptChange'])
}del(id) {// this.$store.commit("del", { id });this.del({id})    // 會造成死循環  => 改名字 },

對象形式 :

如果你想將一個 methods 方法另取一個名字，使用對象形式

 methods: {// 將 this.del() 映射為  this.$store.commit('del')...mapMutations(["showEdit", "hideEdit", "iptChange"]),//  可以全部取名字 也可以改一個名字  // 將 this.d() 映射為  this.$store.commit('d')  ...mapMutations({d: "del"}),del(id) {// this.$store.commit("del", { id });this.d({ id });}}

3. mapActions

使用 mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用

引入

import { mapActions } from "vuex";

數組形式

  methods: {// 將 this.addAsync() 映射為 this.$store.dispatch('addAsync')...mapActions(["addAsync"]),addTodo() {this.addAsync({name: this.todoName});this.todoName = "";}}

對象形式

 methods: {// // 將 this.a() 映射為 this.$store.dispatch('addAsync')...mapActions({a: "addAsync"}),addTodo() {this.a({name: this.todoName});this.todoName = "";}}

頭條-vuex-動態設置keep-alive

設置 keep-alive的include屬性改字符串為數組形式

// App.vue
// 之前   name 組件名
<keep-alive include='home' ></keep-alive>// 改之后
<keep-alive :include="['home']" ></keep-alive>// 動態綁定
<keep-alive :include="cachelist" ></keep-alive>// 數據
data(){return {cachelist : ['home']}
}

把 cachelist 放到 vuex中

配置 vuex

const store = new Vuex.Store({state: {cachelist: ['home'],},
})

使用

// App.vue
computed: {...mapState(['cachelist'],
},<keep-alive :include="cachelist"><router-view></router-view>
</keep-alive>

需求 :

緩存首頁的思路：1. 只要進入到首頁，就應該把首頁給緩存起來。2. 離開首頁的時候，需要判斷了， 如果進入的是詳情頁，home組件依舊要被緩存。3. 離開首頁的時候， 如果進入的不是詳情頁，home組件就不應該被緩存。

添加兩個 mutations的方法

  mutations: {cache(state, playload) {// 如果緩存列表里面沒有 name 就添加進去if (!state.cachelist.includes(playload.name)) {state.cachelist.push(playload.name)}},uncache(state, playload) {// 如果緩存列表里面 有 name , 就刪除if (state.cachelist.includes(playload.name)) {state.cachelist = state.cachelist.filter(v => v !== playload.name)   # 易錯點}},},

組件內導航守衛 - beforeRouteEnter - 進入之前

// Home.vue
import store from 'store'// 路由跳轉之前
beforeRouteEnter (to, from, next) {// this.$store.commit('cache')   this 無法訪問 因為還沒有進入// 進入 home 把 home 添加到緩存列表store.commit('cache',{name :'home'})next()
}

組件內導航守衛 - beforeRouteLeave - 離開之前

// Home.vue
// 離開 home 之前beforeRouteLeave(to, from, next) {if (to.name === 'tabedit') {// 移除store.commit('uncache', {name: 'home',})}next()},

Vuex說明及Todos項目改造

Vuex(vue) / Flux (angular) /Redux(react)

vuex 是什么?

如何使用

什么時候用 ?

Vuex的基本使用

1. vuex的基本使用

2. state

3. mutation

3.2 mutation使用

4. vuex 傳參

Todos 改造

1. 初始化項目

2. 配置 vuex

Todos 步驟

5. 修改狀態

Action 的使用

幾個輔助函數

1. mapState

2. mapGetters

2. mapMutations

3. mapActions

頭條-vuex-動態設置keep-alive

相關文章