（5）vue中的vuex

时间：2021-06-18 19:06:43 阅读：28 评论：0 收藏：0 [点我收藏+]

1.基本认识

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

简单案例：

技术分享图片

在图1中，创建文件夹store,并且在其中创建一个index.js文件，在index.js文件中写入代码。

在图2中，来到main.js文件，导入store对象，并放在new vue中。这样，在其他vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

在图3中，在其他组件中使用store对象中保存的状态即可，通过this.$store.state.属性的方式来访问状态通过this.$store.commit(‘mutation中方法‘)来修改状态

注意事项：

? 我们通过提交mutation的方式，而非直接改变store.state.count

? 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值

2.Vuex有五个核心概念：state,getters,mutations,actions,modules

1. state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

　　 2. getter：从基本数据(state)派生的数据，相当于state的计算属性

　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

　　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

　　 4. action：和mutation的功能大致相同，不同之处在于：1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

　　 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

技术分享图片

2.什么时候使用vuex（多做项目体会）

如果数据还有其他组件复用，建议放在vuex
如果需要跨多级组件传递数据，建议放在vuex
需要持久化的数据（如登录后用户的信息），建议放在vuex
跟当前业务组件强相关的数据,可以放在组件内

3.vue的核心概念详解&使用

如何获取到state的数据呢？

一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <script src="./js/vuex.js"></script>
10 <script src="./js/vue2.0.js"></script>
11 <body>
12     <div id="app">
13         <hello></hello>
14     </div>
15 </body>
16 <script>
17     Vue.use(Vuex);
18    var myStore =  new Vuex.Store({
19         state:{
20             //存放组件之间共享的数据
21             name:"jjk"
22         },
23          mutations:{
24              //显式的更改state里的数据
25          },
26          getters:{
27              //过滤state数据
28          },
29          actions:{
30              //
31          }
32     });
33 
34     Vue.component(‘hello‘,{
35         template:"<p>{{name}}</p>",
36         computed: {
37             name:function(){
38                 return this.$store.state.name
39             }
40         },
41          mounted:function(){
42             console.log(this)
43         }
44     })
45     new Vue({
46         el:"#app",
47         data:{
48             name:"dk"
49         },
50         store:myStore,
51         mounted:function(){
52             console.log(this)
53         }
54     })
55 </script>
56 </html>

可以把getters看成是store的计算属性。getters下的函数接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？过滤的数据会存放到$store.getters对象中。具体看一个例子：

技术分享图片

<!--第一行在组件中computed中-->
<h2>{{getGreaterAgesCount}}</h2>
<!--第二行在vuex的getters中-->
<h2>{{$store.getters.getGreaterAgesCount}}</h2>

getters 如果希望传递其他参数, 那么只能让getters本身返回另一个函数

技术分享图片

在 Vuex store 中，实际改变状态(state) 的唯一方式是通过提交(commit) 一个 mutation。mutations下的函数接收state作为参数，接收一个叫做payload（载荷）作为第二个参数，这个参数是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象。

技术分享图片