Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,其实通俗一点来讲可以理解成放公共变量的地方,你可以在这里放各个组件之间用到的变量,不用传来传去,你可能会想,我自己拿一个组件专门放公共变量挂到Vue的prototype上面去不就行了,也行,但是不是响应式的,要是你说写一个响应式的也不是不行,那也行,那你挺牛的。
官网上扒拉下来这张图,最重点难点就在异步要放在Actions里面再提交给mutations再操作,其他的都还好。
import { createStore } from 'vuex'
export default createStore({
state: {
counter: 1000
},
mutations: {
},
actions: {
},
getters: {
},
modules: {
}
})
state
State顾名思义,就是放变量的地方,公共变量放这里,还有一个单一状态树的概念,即使你有再多的信息,Vue也推荐你只使用一个状态,只使用一个store进行维护,单一状态树能让我们最直接找到某个状态的片段,而且在之后的维护和调试过程中,方便管理。
getters
1.getters处理数据
import { createStore } from 'vuex'
export default createStore({
state: {
counter: 1000
},
mutations: {
},
actions: {
},
getters: {
powerCounter (state) {
return state.counter * state.counter
}
},
modules: {
}
})
<div class="wrapper">
<h2>-----------logincontent-----------</h2>
<div>{
{$store.state.counter}}</div>
<h2>-------------getters-------------</h2>
<div>{
{$store.getters.powerCounter}}</div>
<br><br>
App.vue里面的结构,通过 $store.state.counter拿到store下index.js里面的counter并且展示在了页面上,getters里面又有我写的一个方法,页面跑起来是这样的。
2.getters处理数据2
state里面放了students的数据,这个时候我想在别的组件里拿到大于等于18岁的学生,如果用组件里面的计算属性,如果我想在好几个组件里面用,那我就得计算很多次,这个时候可以在getters里面写一个方法
state: {
counter: 1000,
students: [
{ id: 1, name: 'sherry', age: 18 },
{ id: 2, name: 'lily', age: 1 },
{ id: 3, name: 'alice', age: 23 },
{ id: 4, name: 'tom', age: 8 }
]
},
mutations: {
},
actions: {
},
getters: {
powerCounter (state) {
return state.counter * state.counter
},
adults (state) {
return state.students.filter(s => s.age >= 18)
}
},
modules: {
}
<h2>-----------logincontent-----------</h2>
<div>{
{$store.state.counter}}</div>
<h2&g