【Vuex】2、Vuex单页面到多页面状态管理切换
1、单页面的状态管理
- 我们知道,在单个组件中进行状态管理是一件非常简单的事情
- 什么意思呢?我们来看图片
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142451331-935690157.jpg)
- 这图片中的三种东西,怎么理解呢?
- State:不用多说,就是我们的状态(姑且可以当做就是data中的属性)
- View:视图层,可以针对State的变化,显示不同的信息
- Actions:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变
2、单页面状态管理的实现
<template>
<div classs='test'>
<div>当前计数:{{counter}}</div>
<button @click="counter+1">+1</button>
<button @click="counter-1">-1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
counter: 0
}
}
}
</script>
<style scoped>
</style>
- 在这个案例中,我们有没有状态需要管理呢?没错,就是个数counter
- counter需要某种方式被记录下来,也就是我们的State
- counter目前的值需要被显示在页面中,也就是我们的View部分
- 页面发生某些操作时(我们这里是用户的点击,也可以是用户的input),需要去更新状态,也就是我们的Actions
3、多页面状态管理
- Vue已经帮我们做好了单个页面的状态管理,但是如果是多个页面呢?
- 多个视图都依赖同一个状态(一个状态改了,多个页面需要进行更新)
- 不同界面的Actions都想修改同一个状态(Home.vue需要修改,Profile.vue也需要修改这个状态)
- 也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图,但是也有一些状态(状态a/状态b/状态c)属于我们多个视图共同想要维护的
- 状态1/状态2/状态3你放在你自己的房间中,你自己管理自己用,没问题。
- 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理
- 没错,Vuex就是为我们提供这个大管家的工具
- 全局单例模式(大管家)
- 我们现在要做的就是将共享的状态抽取出来,交给我们的大管家,统一进行管理
- 之后,你们每个视图,按照我规定好的规定,进行访问和修改等操作
- 这就是Vuex背后的基本思想
4、Vuex状态管理图例
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142452047-1662983734.jpg)
5、简单的案例
- 首先我们需要在某个地方存放我们的vuex代码:
- 这里,我们先创建一个文件夹store,并且在其中创建一个index.js文件
- 在index.js文件中写入如下代码:
index.js代码如下:
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142452689-1729241660.png)
- 其次,我们让所有的Vue组件都可以使用这个store对象
- 来到main.js文件,导入store对象,并且放在new Vue中
- 这样,在其他Vue组件中,我们就可以通过this.$store的方式,获取到store对象了
main.js代码如下:
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142453198-843769190.png)
- 使用Vuex的count
- 1、提取出一个公共的store对象,用于保存在多个组件中共享的状态
- 2、将store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到
- 3、在其他组件中使用store对象中保存的状态即可
- 通过this.$state.属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
- 注意事项:
- 我们通过提交mutation的方式,而非直接改变store.state.counter
- 这是因为Vuex可以更明确的追踪状态的变化,所以不要直接改变store.state.counter的值
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142453727-1489555628.png)
本文来自博客园,作者:郭祺迦,转载请注明原文链接:https://www.cnblogs.com/guojie-guojie/p/16446307.html