vuex : 状态管理器,能够管理你的数据状态
作用:将数据交给state集中管理、分发。
应用:用于复杂的页面,一个数据被多个页面或者路由共享(互相交互),或者多层级数据交互时可以使用vuex
(课件:2019-1-12 、Vuex参考地址:https://vuex.vuejs.org/zh/
、 vue常用的UI组件(写手机端很快):https://www.cnblogs.com/theblogs/p/9964753.html
)
先安装vue环境:vue create app
使用vuex步骤:
1.安装:npm i vuex
2.引包:
引 vue 和 vuex 比如:
import Vue from 'vue';
import Vuex from 'vuex';
3.引用:
Vue.use(Vuex)
4.new Vuex.Store({...})
new Vuex.Store({
//你想要哪些数据被所有组件直接拿到就把这些数据放到state下
state:{
//初始化状态
count:10,
注意:改变state中的引用类型的数据必须要让数据直接发生变化(地址发生变化)
比如:
arr:[{id:xx,num:123}]
{id:xx,num:124}
state.arr = [...state.arr]
},
mutations:{
//改变数据的方法
add(state){ //这里的state就是初始化状态
//此处为改变state.xxx数据的代码...
}
//调用:this.$store.commit(mutations中的函数名,可以跟参数)
//注意:在mutations下的操作都是同步的。
}
})
5:new Vue({
store
})
State:驱动应用的数据源
在输出state的时候,可以使用辅助函数来简化你的操作(不用也行)。
1.import {mapState} from 'vuex'
2.(1) computed:mapState(['count'])
2.(2) 建议第二步使用这种:
computed:{
...mapState(['count'])
}
getters (等同于computed):当数据发生变化的时候派生出另一个“事务”
view (视图)层应用:
this.$store.getters.xxx
辅助函数:
mapGetters(['xxx'])
mutatins(类似于methods)是个对像,里面放各种函数(更改状态的逻辑),函数会接收 state 作为第一个参数
const mutations = {
add(state, n) { //n可以是简单类型,也可以是引用类型的
state.count += n.n;
}
}
view 层:
this.$store.commit( ' 函数名 , ' 参数 ' )
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //初始化的状态(数据),当改变state的时候会改变视图 const state = { count: 10, ary: [ { num: 0, id: 0 }, { num: 0, id: 1 } ] } //只有mutations才能改变vuex中的数据状态哦!~ //什么时候让mutations改变,使用this.$store.commit('add')函数名称 const mutations = { add(state, n) { state.count += n.n; }, //如果你的mutation调用了,数据也改了,但是视图没有,这个时候就要想到 //对象要改变地址的问题。 //Object.assgin({},state.obj) JSON.parse(JSON.stringify(state.obj)) INCREMENT(state, obj) { let o = state.ary.find(d => d.id == obj.id); o.num += obj.n; state.ary = [...state.ary]; } } export default new Vuex.Store({ state, mutations, getters: { toDou: (state) => { let arr = JSON.parse(JSON.stringify(state.ary)); return arr.map(e => { if (e.num < 10) { e.num = '0' + e.num } else { e.num = '' + e.num } return e; }); } } })
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div id="app"> <p>这是第一级数据</p> {{toDou}} {{ary}} <ul> <li v-for="(val,key) in toDou"> {{val.num}} <button @click="changeNum(val.id)">+</button> </li> </ul> </div> </template> <script> import { mapState, mapGetters, mapMutations } from "vuex"; export default { name: "app", methods: { changeNum(id) { this.$store.commit({ type: "INCREMENT", n: 1, id }); } }, computed: { ...mapState(["ary"]), ...mapGetters(["toDou"]) } }; </script>
actions(只要是这个数据的状态需要被很多组件使用,并且此数据还是一个从后台请求的数据(异步数据)就要使用actions)
actions:{
actionsName($store,可以跟参数){
//异步环境之后使用
$store.commit('add',参数)
}
}
view层使用:
this.$store.dispatch('actionsName',传参)
module
(将臃肿的store分割成多个模块)
View Code
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
vue常用的UI组件:
https://www.cnblogs.com/theblogs/p/9964753.html