在开发中,我们会的应用程序需要处理各种各样的数据,这些
数据需要保存在我们应用程序中的某一个位置,对于这些数据
的管理我们就称之为是 状态管理。
当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
管理不断变化的state本身是非常困难的:
状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;
这就是Vuex背后的基本思想,它借鉴了Flux、Redux、Elm(纯函数语言,redux有借鉴它的思想):
npm install vuex@next
store本质上是一个容器,它包含着你的应用中大部分的状态(state);每一个Vuex应用的核心就是store(仓库)
注意
Vuex和单纯的全局对象有什么区别呢?
在模板中使用;
在options api中使用,比如computed;
在setup中使用;
案列
src下面创建store文件夹,里面创建index.js
import {
createStore
} from 'vuex'
const store = createStore({
state() {
return {
counter: 0,
name: "张三",
age: 23,
sex: "男"
}
},
mutations: {
increment(state) {
state.counter++
},
decrement(state) {
state.counter--
}
}
})
export default store
在组件中使用
<template>
<div>
{{ $store.state.counter }}
<button @click="add">+1</button>
<button @click="decren">-1</button>
<hr />
<p>{{ name }}</p>
<p>{{ age }}</p>
<p>{{ sex }}</p>
</div>
</template>
<script>
import { useStore, mapState } from "vuex";
import { computed } from "vue";
export default {
setup() {
const store = useStore();
const add = () => {
store.commit("increment");
};
const decren = () => {
store.commit("decrement");
};
return { add, decren };
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Vuex 使用单一状态树:
单一状态树的优势:
我们可以使用计算属性或者使用mapState的辅助函数:
import {
computed
} from 'vue'
import {
useStore,
mapState
} from 'vuex'
export default function useState(mapper) {
const store = useStore()
const stateFns = mapState(mapper)
const state = {}
Object.keys(stateFns).forEach(key => {
state[key] = computed(stateFns[key].bind({
$store: store
}))
})
return state
}
组件中使用
const state = useState({
name: (state) => state.name,
});
return
某些属性我们可能需要经过变化后来使用,这个时候可以使用getters:
getters: {
totalPrice(state) {
let totalPrice = 0;
for (const book of state.books) {
totalPrice = +book.count * book.price
}
return totalPrice;
}
},
getters可以接收第二个参数:
getters: {
totalPrice(state, getters) {
let totalPrice = 0;
for (const book of state.books) {
totalPrice = +book.count * book.price
}
return totalPrice + '---'+getters.myName;
},
myName(state) {
return state.name
}
},
在setup中使用
单独定义一个js文件
export function useGetters(mapper) {
const store = useStore()
const stateFns = mapGetters(mapper)
const state = {}
Object.keys(stateFns).forEach(key => {
state[key] = computed(stateFns[key].bind({
$store: store
}))
})
return state
}
组件中引用
setup() {
const stateFns = useGetters(["totalPrice"]);
return { ...stateFns };
},
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation:
mutations: {
increment(state) {
state.counter++
},
decrement(state) {
state.counter--
},
incrementN(state, payload) {
state.counter += payload.n
}
}
const incre = () => {
store.commit("incrementN", { n: 100, name: 20 });
};
store.commit({
type: ADD_NUMBER,
count: 1200,
});
Action类似于mutation,不同在于:
actions: {
// 放函数
incrementAction(context) {
context.commit('increment')
}
}
这里有一个非常重要的参数context:
分发使用的是 store 上的dispatch函数;
setup() {
const store = useStore();
const increment = () => {
setTimeout(() => {
store.dispatch("incrementAction");
}, 2000);
};
return { increment };
},
decrementAuction(context,payload){
context.commit('incrementN',{n:payload.num})
}
我们可以通过让action返回Promise,在Promise的then中来处理完成后的操作;
什么是Module?
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿;
对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象:
getters: {
doubleHomeCounter(state, getters, rootState, rootGetters) {
return state.homeCounter * 2
},
otherGetter(state) {
return 100
}
},
mutations: {
increment(state) {
state.homeCounter++
}
},
actions: {
incrementAction({commit, dispatch, state, rootState, getters, rootGetters}) {
commit("increment")
commit("increment", null, {root: true})
},
doubleHomeCounter2({commit}){
commit("increment")
}
}
默认情况下,模块内部的action和mutation仍然是注册在全局的命名空间中的:
如果我们希望模块具有更高的封装度和复用性,可以添加 namespaced: true 的方式使其成为带命名空间的模块:
如果我们希望在action中修改root中的state,那么有如下的方式:
方式一:通过完整的模块空间名称来查找;
方式二:第一个参数传入模块空间名称,后面写上要使用的属性;
方式三:通过 createNamespacedHelpers 生成一个模块的辅助函数;
官方解释:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。