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,
// 关联 store
el: '#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 : {
// 修改 name
changeName(state) {
state.name = '马哥'
console.log(state.name)
},
// 修改 money
changeMoney(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 } = playload
state.list = state.list.filter(v => v.id !== id)
},
}

##3. 添加任务

// vue
<input
v-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 = {
// 修改name
updateName(state, playload) {
let { id, name } = playload
let todo = state.list.find(v => v.id === id)
todo.name = name
},
}

5. 修改状态

// vue
<input
class="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 } = playload
let 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
<!-- 清除已完成 -->
<button
class="clear-completed"
@click="$store.commit('clear')"
v-show="$store.getters.isClearCompletedShow"
>Clear completed</button>
// vuex
clear(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

// vue
this.$store.dispatch("addAsync", {
name: this.todoName
});
// vuex -
actions
const actions = {
// 添加 - 异步
// store == context
addAsync(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

1. 设置 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']
}
}

2. 把 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>

3. 需求 :

缓存首页的思路：
1. 只要进入到首页，就应该把首页给缓存起来。
2. 离开首页的时候，需要判断了， 如果进入的是详情页，home组件依旧要被缓存。
3. 离开首页的时候， 如果进入的不是详情页，home组件就不应该被缓存。

4. 添加两个 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)
# 易错点
}
},
},

5. 组件内导航守卫 - beforeRouteEnter - 进入之前

// Home.vue
import store from 'store'
// 路由跳转之前
beforeRouteEnter (to, from, next) {
// this.$store.commit('cache')
this 无法访问 因为还没有进入
// 进入 home 把 home 添加到缓存列表
store.commit('cache',{
name :'home'
})
next()
}

6. 组件内导航守卫 - 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的基本使用Todos 改造Todos 步骤Action 的使用几个辅助函数头条-vuex-动态设置keep-alive的全部内容，希望文章能够帮你解决Vuex说明及Todos项目改造Vuex(vue) / Flux (angular) /Redux(react)Vuex的基本使用Todos 改造Todos 步骤Action 的使用几个辅助函数头条-vuex-动态设置keep-alive所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。