Vue（6）- Vuex 入门

在 ForVuex 组件中操作 state 里的数据

 1 App.vue 文件
 2 
 3 <template>
 4   <div id="app">
 5     <ForVuex />
 6   </div>
 7 </template>
 8 
 9 <script>
10   import ForVuex from './components/ForVuex'
11   export default {
12     name: 'App',
13     components: {
14       ForVuex
15     }
16   }
17 </script>

 1 main.js 文件
 2 
 3 import Vue from 'vue'
 4 import App from './App'
 5 import store from './store'
 6 
 7 Vue.config.productionTip = false
 8 
 9 new Vue({
10   el: '#app',
11   components: {
12     App
13   },
14   store,
15   template: '<App/>'
16 })

 1 store.js 文件，此文件是 vuex 的核心文件
 2 
 3 import Vue from 'vue'
 4 import Vuex from 'vuex'
 5 Vue.use(Vuex)
 6 
 7 const store = new Vuex.Store({
 8 
 9   // state 数据源
10   state:{
11     age:17                                              // 这个state 里面的数据可以在任何组件中都能访问 , 访问方式 --> this.$store.state.age
12   },
13 
14   // 获取数据
15   // 可以使用 this.$store.state.age 获取 state 中的数据 , 还是建议使用 getters 来获取
16   // getters 里可以做一些逻辑,比如 age 不能小于 0
17   getters:{
18     // state 数据源
19     getAgeInState(state){                               // 调用方式 --> this.$store.getters.getAgeInState
20       if(state.age<0){
21           state.age = 0
22       }
23       return state.age;
24     }
25 
26   },
27 
28   // 修改数据源
29   mutations:{
30     // state 是数据源
31     mutations_changeAge(state){                           // 调用方式 --> this.$store.commit("mutations_changeAge");
32       state.age -= 5;
33     }
34   },
35 
36   // 某种程度上 可以看作是 和 mutations 作用一致
37   // actioins 用来执行 mutations 的方法 --> 因为没有 actions 也可以执行 mutations 的方法 --> 所以 action 不是必须的
38   // 那为什么出现了 action --> 因为 actions 可以是异步的 , 而 mutatios 是绝不能异步修改数据的 --> 所以为了解决异步处理数据 , 出现了 acitions
39   actions: {
40     // 承上启下的context
41     actions_executeMutations(context){                    // 调用方式 -->  this.$store.dispatch("actions_executeMutations")
42       context.commit("mutations_changeAge");              // 执行 mutations 的 mutations_changeAge 方法
43     }
44   }
45 
46 })
47 
48 export default store

 1 ForVuex.vue 文件 , 操作 state 里面的数据
 2 
 3 <template>
 4   <div>
 5     <h2>ForVuex Component</h2>
 6     <p>
 7       <p>{{age}}</p>
 8       <p>{{getAge1}}</p>
 9       <p>{{getAge2}}</p>
10       <p>执行 mutations 的方法<button @click="doStoreCommit">StoreCommit</button></p>
11       <p>执行 actioins 的方法<button @click="doStoreDispatch">StoreDispatch</button></p>
12     </p>
13   </div>
14 </template>
15 
16 <script>
17   export default{
18     name:"ForVuex",
19     data(){
20       return{
21         age:this.$store.state.age
22       }
23     },
24     computed:{
25       getAge1(){
26         return this.$store.state.age;
27       },
28       getAge2(){
29         return this.$store.getters.getAgeInState;
30       }
31     },
32     methods:{
33       doStoreCommit(){
34         // 执行 mutations 的方法
35         this.$store.commit("mutations_changeAge");
36       },
37       doStoreDispatch(){
38         // 执行 actions 的方法
39         this.$store.dispatch("actions_executeMutations");
40       }
41     }
42   }
43 </script>

重点
　　多个组件之间的数据共享两种方式
　　　　1.让多个组件构成子父级关系 --> 就可以子父级之间传递数据
　　　　2.使用 vuex --> 没有关系的任何两个组件之间传递数据

　　vuex
　　　　向任何组件共享数据
　　　　保证所有其他组件从当前组件拿到的数据都是一致的