1、单页面的状态管理
- 我们知道，在单个组件中进行状态管理是一件非常简单的事情
- 什么意思呢？我们来看图片
- 这图片中的三种东西，怎么理解呢？
- 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状态管理图例
5、简单的案例
- 首先我们需要在某个地方存放我们的vuex代码：
- 这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件
- 在index.js文件中写入如下代码：
- 其次，我们让所有的Vue组件都可以使用这个store对象
- 来到main.js文件，导入store对象，并且放在new Vue中
- 这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到store对象了
- 使用Vuex的count
- 1、提取出一个公共的store对象，用于保存在多个组件中共享的状态
- 2、将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
- 3、在其他组件中使用store对象中保存的状态即可
- 通过this.$state.属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
- 注意事项：
- 我们通过提交mutation的方式，而非直接改变store.state.counter
- 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.counter的值
标签：状态,视图,切换,Vuex,我们,store,页面 来源： https://www.cnblogs.com/guojie-guojie/p/16446307.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。