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

• 組件化開發
• 把結構和樣式都拷貝過來并且引入
• 組件分為三個組件 : 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项目改造的全部內容，希望文章能夠幫你解決所遇到的問題。

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