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组件，在该组件中的计算属性中监听，组件内容如下：

 <template>

     <div>

     <!-- <h5 style="backgroudcolor:red">Vuex:{{showstorecount}}</h5> -->

     <h5>Vuex:{{showcount}}</h5>

     <h5>计算属性:{{showstatevalue}}</h5>

     <h5>vuex中的计算属性：getters:{{addcountgetters}}</h5>

     </div>

 </template>

 <script>

     //import {mapState,mapGetters} from 'vuex'

     import {mapState} from 'vuex'

     export default {

         // computed: {//第一种方式。

         //     showstorecount() {

         //         return this.$store.state.count;

         //     }

         // },

         // computed:mapState({ //第二种，但是这样就使用不了计算属性啦。

         //     count:state=>state.count,

         //     showcount:'count' //等于 count:state=>state.count

         // })

         computed:{

             ...mapState({//es6 展开。这样既可以用vuex，也可以使用计算属性。

              showcount:'count',

             }),

             // ...mapGetters([//名字和getters中的属于一样时，用数组就可以映射。

             //     'addcountgetters'

             // ]),

             showstatevalue(){//监听中使用计算属性监听vuex中的数据。

                 return this.$store.state.count*2;

             },

             addcountgetters(){

                 return this.$store.getters.addcountgetters;

             }

         },

     }

 </script>

 <style lang="scss" scoped>

 </style>

4：在主组件App.vue中添加触发store 中mutations定义的同步方法和actions中定义的异步或者同步方法。

 <template>

   <div id="app">

    <!-- <m-parent></m-parent> -->

    <button @click="sendmsg">非父子传数据(bus)</button>

    <button @click="tohome">home</button>

    <button @click="addcount">vuex改变state(addcount)</button>

    <button @click="subcount">vuex改变state(subcount)</button>

     <button @click="addcountasync">vuex改变state(addcountasync)</button>

    <router-view/>

   </div>

 </template>

 <style>

 </style>

 <script>

 //import MParent from './views/Parent'

 import bus from './until/bus'

 export default {

   // components: {

   //   MParent,

   // },

   methods: {

     sendmsg() {

       bus.$emit('appsendmsg','I am from app!');

     },

     tohome(){

       this.$router.push({path:'/home'});

     },

     addcount(){//执行vuex中的同步方法。mutations

       this.$store.commit('addcount');

     },

     subcount(){

      this.$store.commit('subcount');

     },

      addcountasync(){

      this.$store.dispatch('addcountasync');

     },

   },

 }

 </script>

this.$store.commit('')触发mutations中定义的方法，

this.$store.dispatch('')触发actions中定义的方法。

5：结果显示：

巴特西

vuex简单使用。

最新文章

热门文章