vuex 简单使用 vuex的理解和使用

怎样用node.js创建vue3.0项目模板自己百度。这里直接进入vuex简单使用实例。

什么是vuex? 官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

项目结构：

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：结果显示：