我们知道, 要在单个组件中进行状态管理是一件非常简单的事情
这图片中的三种东西, 怎么理解呢?
Vue 已经帮我们做好了单个界面的状态管理, 但是如果是多个界面呢?
也就是说对于某些状态 (状态1\状态2\状态3) 来说只属于我们某一个视图, 但是也有一些状态( 状态a\状态b\状态c ) 属于多个视图共同想要维护的
全局单例模式 (大管家)
首先, 我们需要在某个地方存放我们的Vuex 代码:
其次, 我们让所有的Vue组件都可以使用这个 store 对象
来到main.js文件, 导入store对象, 并且放在 new Vue中
这样, 在其他的Vue组件中, 我们就可以通过 $store的方式, 获取到这个store对象了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifhPbJqh-1630130671735)(img/image-20210609114408524.png)]
使用Vuex 的 content
this.$store.state.属性的方式来访问状态this.$store.commit( ‘mutation中方法‘ ) 来修改状态mutation的方式， 而非直接改变store.state.countstore.state.count的值有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中:
// 获取 state 平方后的值
const store = new Vuex.Store({
state: {
content: 1000
}
}
我们可以在 Store 中定义 getters
const store = new Vuex.Store({
state: {
content: 1000
},
getters: {
powerContent(state) {
return state.content * state.content;
}
}
})
在组件中调用
<template>
<div id="app">
<h2>-----------app组件 getters 相关信息-------------</h2>
<p>content的平方{{ $store.getters.powerContent }}</p>
</div>
</template>
<script>
import HelloVuex from "./components/HelloVuex";
export default {
name: ‘App‘,
components: {
HelloVuex
}
}
</script>
<style>
</style>
如果我们已经有了一个获取所有年龄大于20岁学生列表的 getter, 那么代码可以这样来写
getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getter 本身返回另一个函数
比如上面的案例中, 我们希望根据 age 获取用户信息
Vuex 的store 状态的更新唯一方式: 提交Mutation
Mutation主要包括两部分:
mutation 的定义方式:
通过mutation更新状态
在通过mutation 更新数据的时候, 有可能我们希望携带一些额外的参数
Mutation中的代码:
组件中的代码:
但是如果参数不是一个呢?
methods: {
addCount(count){
this.$store.commit({
type:‘increaseCount‘,
count
})
}
}
mutations: {
increaseCount(state, payload) {
console.log(payload);
state.content += payload.count;
}
}
Vuex 的store 中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bzlo1b3S-1630130671741)(img/属性被添加到响应式系统中.jpg)]
这就要求我们必须遵守一些Vuex对应的规则:
Vue.set(obj,‘newProp‘,123);Vue.delete(state,‘key‘)
通常情况下, Vuex 要求我们 Mutation中的方法必须是同步方法
比如我们之前的代码, 当执行更新时, devtools 中会有如下信息
但是, 如果Vuex中的代码使用了异步函数
你会发现state中的info数据一直没有被改变, 因为它无法追踪到
我们强调, 不要在Mutation中进行异步操作
Action的基本使用代码如下:
context 是什么?
这样的代码是否多此一举呢?
在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
同样的, 也是支持传递payload
前面我们学习ES6语法的时候说过, Promise经常用于异步操作
ok , 我们来看下面的代码:
Modules 是模块的意思, 为什么在Vuex 中我们要使用模块呢?
我们按照什么样的方式来组织模块呢?
this.$store来调用的
上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写
注意：
this.$store来调用的当我们的Vuex 帮助我们管理过多的内容时, 好的项目结构可以让我们的代码更加清晰
原文：https://www.cnblogs.com/long-mao-bu-re/p/15200190.html