Vuex状态管理工具的使用

1.vuex：状态管理模式

• 简介：官方提供的一款状态管理工具
  
  什么时候使用？：中大型单页应用中
  
  小型单页应用没必要，会很冗杂，建议store模式，即：组件之间的通信就够用了。

2.vuex安装

• 在脚手架安装时就安装了vuex，会自动创建store.js,一般我们需要创建一个store文件
• 在main.js入口文件中注册
• 在store的首页中引入vuex并vue.use()使用：
  
  让vue内部都可以使用vuex插件库

3.Vuex组成

1）state：存放数据的地方
取数据：this.$store.state.num  辅助方法取数据：mapState(‘num’) 或者 mapState({(_num)=>state.num}) 2)actions:异步请求数据，将请求到的数据在共享状态里更新，交给mutations

//actions异步请求数据
getRandom(cxt){
setTimeout(function(){
let random = Math.ceil(Math.random()*100)

//通过传递过来的cxt来触发mutation的方法
//参数1：触发的mutations的方法  //参数2：传递给函数的参数
cxt.commit(RANDOM_NUM,random)
},1000)
}

3)mutations:同步的更改状态

[RANDOM_NUM](state,random){
state.num = random
}

4）getters：依靠原生的状态派生新的状态

5).module:数据过多，进行分模块管理

4.项目结构

1）应用层的状态（数据）应该放在单个的store中 2）提交mutation是改变状态的唯一方法 3）异步逻辑都应该放到actions中执行 4）对于大型应用，可以分模块管理

5.vuex的核心概念

• store：单一状态树:每个应用仅仅存在一个store实例来保存数据

• state：存放状态

取值(以num为例)：$store.state.num

拿数据，不要在data中拿，只渲染一次，不会响应式的拿数据

//例如：data中的num只会 渲染一次 state状态改变  data不会再次渲染
data(){
return {
num: this.$store.state.num
}
},

在computed中拿数据，会响应式的拿数据

computed:{
num(){
return this.$store.state.num
}
}

mapState: 辅助方法，当状态较多时，取状态会有很多冗余，mapState提供了方便的取数据的方法

//以数组的方式，里面可以是多个数据
computed:mapState(['num'，'a'])

//computed里面还要写很多计算属性，因此用 ...mapState 展开运算符
computed:{
aaa(){
return  111
},
...mapState(['num'])
}

… 展开运算符：将key和value值展开显示

let a ={name:"张三"}
let b ={age:18,...a}  //b={age:18,name:"张三"}

…剩余操作符

function fn(...a){
console.log(a)
}
fn(1,2,3)
//结果是[1,2,3]

//json= {a:1,b:2}
for(var key in json){
console.log(json.key)  //undefined
console.log(json[key])  // a b
}

***getters：***有时候，我们需要state中的某个状态派生出一个新的状态，那我们就需要用到getter

//创建getters (可以将getters单独拿出一个文件夹导出，也可以直接在store中注册)

doubleNum(num){
return state.num *2
}

取数据

this.$store.getters.doubleNum

如果取多个状态比较麻烦，提供了辅助函数：mapGetters

computed:{
...mapGetters(['doubleNum','threeNum'])
}

• mutation:更改状态的唯一方法：通过commit方法提交mutation

//修改数据
mutations:{
changeNum(state){
state.num++
}
}

***commit:***调用mutations里面的更改数据的某个方法

methods:{
this.$store.commit('changeNum')
}

我们不要在方法里面直接更改state数据：this.$store.state.num = 1000,而是需要使用mutations更改，mutation是一个纯对象里面包含很多更改数据的方法，这些方法通过形参state接收数据，在函数体里更改，这时组件用到的数据也会更改，这样实现响应式的

mapMutations: 辅助函数，触发修改数据的事件,这是一个方法，要运用在methods里面

...mapMutations(['changeNum'])

• actions:主要是用来异步请求数据的
  

action是提交到mutation，而不是直接改变状态

Action 函数接受一个与 stor实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation

import {RANDOM_NUM} from './const'
export default{
getRandom(cxt){
setTimeout(function(){
let random = Math.ceil(Math.random()*100)

//通过传递过来的cxt来触发mutation的方法
//参数1：触发的mutations的方法  //参数2：传递给函数的参数
cxt.commit(RANDOM_NUM,random)
},1000)

}
}

在mutation这边写一个函数，更该数据，并接受actions传递过来的数据，actions里面的cxt.commit方法调用mutation更改数据的函数

//在mutation里面

[RANDOM_NUM](state,random){
state.num = random
}

• 点赞
• 收藏
• 分享
• 文章举报

种提莫的小蘑菇丶 发布了9 篇原创文章 · 获赞 3 · 访问量 404 私信 关注