Vuex状态管理模式详细说明及使用示例
简述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
安装依赖
方式一： CDN
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
方式二：NPM
npm install vuex --save
方式三：Yarn
yarn add vuex
配置说明
Vuex 实例对象属性 主要有下面5个核心属性
1.state :全局访问的state对象，存放要设置的初始状态名及值（必须要有）
2.mutations :里面可以存放改变 state 的初始值的方法 ( 同步操作--必须要有 )
3.getters :实时监听state值的变化可对状态进行处理，返回一个新的状态，相当于store的计算属性（不是必须的）
4.actions :里面可以存放用来异步触发 mutations 里面的方法的方法 ( 异步操作--不是必须的 )
5.modules :存放模块化的数据（不是必须的）
全局配置及使用
- state属性:单一状态树,用一个对象就包含了全部的应用层级状态
1.在src下创建文件夹store/index.js，始化设置两个状态
// 第一步：引入Vue、和Vuex(固定写法)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 第二步：声明Vuex 的五个属性，其中state,mutations 是一定要定义的，其他的三个属性对象根据实际需要。
const state = { // 初始化状态值--一定要有该属性对象
num:3, // 初始化一个状态，存放学生人数
name:[ // 初始化一个状态，存放学生的分数信息
{name:'张三',score:9999},
{name:'李思',score:9880},
{name:'小明',score:97778}
]
}
// 自定义改变state初始值的方法--一定要有该属性对象
// const mutations = {
// ...
// }
// 状态计算属性--该属性对象不是必须的
// const getters = {
// ...
// }
// 异步操作状态--该属性对象不是必须的
// const actions = {
// ...
// }
// 状态模块--该属性对象不是必须的
// const modules = {
// ...
// }
// 第三步：创建一个 store 实例，将声明的五个变量赋值赋值给 store 实例，如下：
const store = new Vuex.Store({
state,
// mutations,
//下面三个非必须
// getters,
// actions,
// modules
})
// 第四步：导出 store 实例，供外部访问
export default store
2.创建一个测试组件TestVuex,在组件中获取两个状态的值
注：两种方式都可以获取状态值,效果是一样的：
直接使用状态值和在vue计算属性中使用
<template>
<div>
<div class="demo1">
<h4>直接使用状态值—— <span>人数：{{$store.state.Num}}</span></h4>
<p v-for="(item,index) in $store.state.Stud" :key="index">
姓名：{{item.name}} | 总数：{{item.score}}
</p>
</div>
<div class="demo2">
<h4>通过计算属性获取—— <span>人数：{{StudNum}}</span></h4>
<p v-for="(item,index) in StudScore" :key="index">
姓名：{{item.name}} | 总数：{{item.score}}
</p>
</div>
</div>
</template>
<script>
export default {
computed: { // 计算属性
StudNum() {
return this.$store.state.Num
},
StudScore() {
return this.$store.state.Stud
},
}
}
</script>
<style lang="less" scoped>
div{
text-align: center;
margin: 0px;
padding: 0px;
border: 1px solid #B3C0D1;
.demo1{
background-color:#b7ceff;
h4{
margin-top: 50px;
}
}
.demo2{
background-color:#ffdcfc;
}
}
</style>
3.效果图
state使用效果图
- mapState 辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
示例如下：
<div class="demo3">
<h4>mapState通过计算属性获取—— <span>人数：{{Count}}</span></h4>
<p v-for="(item,index) in User" :key="index">
姓名：{{item.name}} | 总数：{{item.score}}
</p>
</div>
<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
data(){
return{
localCount:12
}
},
computed: mapState({
Count: state => state.Num, // 箭头函数可使代码更简练
User: 'Stud', // 可也传字符串参数 'User' 等同于 `state =>state.Stud
nweNum(state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数纠正this指向
return state.count + this.localCount
}
})
}
</script>
当映射的计算属性的名称与 state 的子节点名称相同时，也可以给 mapState 传一个字符串数组
computed: mapState([
'Num', // 映射 this.Num为 this.$store.state.Num
'Stud' // 映射 this.Stud为 this.$store.state.Stud
])
mapState函数返回的是一个对象。如何将它与局部计算属性混合使用呢？
通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。但是自从有了对象展开运算符 ，我们可以极大地简化写法：
computed: { // 计算属性
StudNum() {
return this.$store.state.Num
},
StudScore() {
return this.$store.state.Stud
},
...mapState({
Count: state => state.Num, // 箭头函数可使代码更简练
User: 'Stud', // 可也传字符串参数 'StudScore' 等同于 `state =>state.StudScore
nweNum(state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数纠正this指向
return state.count + this.localCount
}
})
}
最终全部显示效果
全部显示效果
- Getter属性的使用
有时候需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
Vuex 允许我们在 store 中定义getter（可以认为是 store 的计算属性）。
就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
1.Getter 接受 state 作为其第一个参数
2.Getter 也可以接受其他 getter 作为第二个参数
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
示例1：getter 通过属性访问
在上面创建的store/index中添加如下：
const getters = {
// 获取分数为777分以上的学生
perfect: state => { // 过滤分数，获取777分及以上的学生
return state.Stud.filter(Stud => Stud.score>=777)
},
// 获取分数为777分以上的学生数量
perfectNum: (state,getters) => { // getters 也可以接受其他 getters 作为第二个参数
return getters.perfect.length
}
}
const store = new Vuex.Store({
state,
// mutations,
//下面三个非必须
getters,
// actions,
// modules
})
组件中添加如下：
getter在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
即只要对应的state状态不发生改变，不管执行多少次getters,都会从缓存中获取getters的状态值，不会重新计算，一旦对应的state发生改变，getters就会重新计算，并缓存起来
<div>
<h4>getters 派生的状态 通过属性访问</h4>
<p>大于等于777总数的人数：{{$store.getters.perfectNum}}</p>
<p v-for="(item,index) in $store.getters.perfect" :key="index">
姓名：{{item.name}} | 总数：{{item.score}}
</p>
</div>
示例1效果图
示例2：getter 通过方法访问
在store/index.js中getter 里添加
// 用总数查询信息
checkScore: state => n => { // 返回一个方法函数
return state.Stud.find(Stud => Stud.score === n)
}
getter在通过方法访问时，每次都会去进行调用，而不会缓存结果。
即不管对应的状态有没有发生改变，访问一次getters,就会执行一次getters返回的函数，并且不会被缓存。
<div>
<h4>getters 派生的状态 通过方法访问</h4>
<p>有没有人得777分</p>
<p>{{$store.getters.checkScore(777)}}</p>
</div>
示例2效果图
更多详情Vuex
