安装
npm i -S vuex@4.0.0-alpha.1
or
yarn add vuex@4.0.0-alpha.1
例子
// store.js
import { createStore } from 'vuex'
const subModel = createStore({
namespaced: true,
state: {
target: 'xxx'
},
mutations: {
updateTarget(state, newTarget){
state.target = newTarget
}
}
})
export default createStore({
state: {
id: 'xxxx',
prefix: 'mini',
name: 'wolf'
},
getters: {
fullName(state){ return `${state.prefix}-${state.name}` }
},
mutations: {
updateName(state, newName){
state.name = newName
}
},
moduels:{ subModel }
})
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store.js'
// 创建应用
const app = createApp(App)
// 注册 store
app.use(store)
// page
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup(){
// 获取store实例
const store = useStore()
// 绑定响应
const name = computed(() => store.state.name)
const fullName = comoputed(() => store.getters.fullName)
const target = computed(() => store.state.subModel.target )
return {
name,
fullName,
target
}
}
}
使用对比
- state
// old
{
computed:{
name(){ return this.$store.state.name },
...mapState('moduleName', [...])
}
}
// new
{
setup(){
// 单一值引入
const name = computed(() => store.state.name )
// 引入整个state
const name = computed( () => store.sate )
}
}
- getter
// old
{
computed:{
name(){ return this.$getters.state.name },
...mapGetters('moduleName', [...])
}
}
// new
{
setup(){
// 单一值引入
const name = computed(() => store.getters.name )
// 引入整个state
const name = computed( () => store.getters )
}
}
- mutation
// old
{
methods: {
updateName(){
this.$store.commit('method name', data)
},
...mapMutations([
'methodName'
])
}
}
// new
{
setup(){
const updateName = newName => store.commit("name", newName)
}
}
- action
// old
{
methods:{
load(){
this.$store.dispatch('methodName', data)
},
...mapActions(['methodName'])
}
}
// new
{
setup(){
const load = () => store.dispath('methodName', data)
}
}
hack
- getter observe
// 将computed 放在 getter中
{
state:{ name: 'coco' },
getters:{
observeName(state){
return computed(() => state.name)
}
}
}
// page
{
setup(){
return {
name: store.state.name // 不响应值变化
observeName: store.getters.observeName // 响应值变化
}
}
}
通过 getter 返回包装后值，减少组件内的 computed 包装
- state data-prop
{
setup(){
return {
name: store.state.name,
nameCopy: store.state.name,
staticName: 'xxx'
}
},
template:`
<h1> {{ name }} </h1>
<h1> {{ nameCopy }} </h1>
<input v-model='name' />
<h1> {{ staticName }} </h1>
<input v-model='staticName' />
`
}
纯值不能作为 v-model 绑定值, 随着 input 的输入, name 响应值变化， nameCopy 未响应,
- state ref
{
state: {
refName: ref('name')
}
}
// page
{
setup(){
const store = useStore()
return {
refName: store.state.refName
}
}，
template:`
<input v-modle='refName'></input>
`
}
直接使用 ref 作为state， 类似实现全局变量, 不推荐这种使用方式 直接屏蔽单项数据流模式。
总结
新的vuex 基础使用及api 没要太大变化, 调用方式更灵活. 但在当前的新的vue 版本下， vuex 存在的意义不大.
对于中小项目， 完全可以依靠 vue 实现自定义的全局状态管理工具.
