vuex簡單使用。

項目結構：

 

 

 

1：首先在項目中新建store.js文件，.js文件內容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    state:{
     count:0
    },
    getters:{
        addcountgetters(state){
           return state.count + 4;
        }
    },
    mutations:{//相當於methods,定義一些方法(同步)。方法裏有個默認參數--state
      addcount(state){
          state.count++;
      },
      subcount(state){
          state.count--;
      }
    },
    actions:{//異步操作（也可以定義同步方法）。提交mutation，而不是直接變更狀態。
      addcountasync(context){
          setTimeout(()=>{
            context.commit('addcount');
          },1000);//延遲一秒。
      }
    }
})

2：在main.js中註冊store.js文件，js文件內容如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

//2019.12.11,全局路由守衛。
router.beforeEach((to,from,next)=>{
  console.log(to.path+','+from.path);
  if(to.path != '/child'){
    next();
  }else{
    alert('沒有權限進入該頁面！')
  }

})
new Vue({
  router,//掛載router.js
  store,
  render: h => h(App),
}).$mount('#app')

3：在views目錄下新建Store.vue組件，在該組件中的計算屬性中監聽，組件內容如下：

 1 <template>
 2     <div>
 3     <!-- <h5 style="backgroudcolor:red">Vuex:{{showstorecount}}</h5> -->
 4     <h5>Vuex:{{showcount}}</h5>
 5     <h5>計算屬性:{{showstatevalue}}</h5>
 6     <h5>vuex中的計算屬性：getters:{{addcountgetters}}</h5>
 7     </div>
 8 </template>
 9 
10 <script>
11     //import {mapState,mapGetters} from 'vuex'
12     import {mapState} from 'vuex'
13 
14     export default {
15         // computed: {//第一種方式。
16         //     showstorecount() {
17         //         return this.$store.state.count; 
18         //     }
19         // },
20         // computed:mapState({ //第二種，但是這樣就使用不了計算屬性啦。
21         //     count:state=>state.count,
22         //     showcount:'count' //等於 count:state=>state.count
23         // })
24         computed:{
25             ...mapState({//es6 展開。這樣既可以用vuex，也可以使用計算屬性。
26              showcount:'count',
27             }),
28             // ...mapGetters([//名字和getters中的屬於一樣時，用數組就可以映射。
29             //     'addcountgetters'
30             // ]),
31             showstatevalue(){//監聽中使用計算屬性監聽vuex中的數據。
32                 return this.$store.state.count*2;
33             },
34             addcountgetters(){
35                 return this.$store.getters.addcountgetters;
36             }
37         },
38     }
39 </script>
40 
41 <style lang="scss" scoped>
42 
43 </style>

4：在主組件App.vue中添加觸發store 中mutations定義的同步方法和actions中定義的異步或者同步方法。

 1 <template>
 2   <div id="app">
 3    <!-- <m-parent></m-parent> -->
 4    <button @click="sendmsg">非父子傳數據(bus)</button>
 5    <button @click="tohome">home</button>
 6    
 7    <button @click="addcount">vuex改變state(addcount)</button>
 8    <button @click="subcount">vuex改變state(subcount)</button>
 9 
10     <button @click="addcountasync">vuex改變state(addcountasync)</button>
11    <router-view/>
12   </div>
13 </template>
14 
15 
16 <style>
17 
18 </style>
19 <script>
20 //import MParent from './views/Parent'
21 import bus from './until/bus'
22 export default {
23   // components: {
24   //   MParent,
25   // },
26   methods: {
27     sendmsg() {
28       bus.$emit('appsendmsg','I am from app!');
29     },
30     tohome(){
31       this.$router.push({path:'/home'});
32     },
33     addcount(){//執行vuex中的同步方法。mutations
34       this.$store.commit('addcount');
35     },
36     subcount(){
37      this.$store.commit('subcount');
38     },
39      addcountasync(){
40      this.$store.dispatch('addcountasync');
41     },
42   },
43 }
44 </script>

this.$store.commit('')觸發mutations中定義的方法，

this.$store.dispatch('')觸發actions中定義的方法。

 

5：結果顯示：