• vuex-详细解读


    demo地址

    vuex是什么?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    理解:多个组件共享状态(即数据),由vuex统一管理。

    核心概念

    • state:定义状态属性(变量)
    • getters:对数据获取之前的再次编译,相当于状态管理(store)的计算属性。我们在组件中使用 $sotre.getters.add()
    • mutations:同步操作。修改状态,通过commit提交mutations,在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
    • actions:异步操作。 通过mutations提交actions,在组件中使用是$store.dispath('')
    • modules:由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,对象越大越复杂。

                            所以Vuex 将 store 分割成模块(module)。
                            每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
    安装

    npm install vuex --save

    创建项目

    写个demo吧   为方便讲解,文档内容与实际demo有差异,

    先总结哈:

    1.获取store中某状态属性:通过$store.xxx 或 computed 或 getters 或mapState 或mapGetters

    2.同步时:$store.commit—触发—mutaion—改变—state   

      this.$store.commit('addCount') 可写成 ...mapMutations(['addCount']);

    3.异步时:$store.dispatch—提交— mutation —通过—commit —改变—state   

      this.$store.dispatch('addCount') 可写成 ...mapActions(['addCount']);

    4.使用mapMutations,mapActions等 前需要引入

      import { mapState,mapGetters, mapMutations,mapActions } from 'vuex';

    目录大概如下:

    第一步:创建store.js(可自行取名)引入vuex,并且实例化

    //store.js中
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      // 状态属性
      state: {
        count:0,
      },
      // 状态管理中的计算属性
      getters:{
        
      },
      // 修改state中的值,需改变mutations,改变mutations需用commit
      mutations: {
        
      },
      // 管理mutations
      actions:{
         
      }
    })
    
    export default store;

    第二步:在main.js中引入store.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from'./store/store.js'
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

    此时已经正确创建store仓库,并可投入使用了。

    下面如何获取store中的count呢?

     1.第一种:通过$store.state.count

    <h2>{{$store.state.count}}</h2>

    2.第二种:本身计算属性computed取值

    <h2>{{getCount}}</h2>
    computed:{
       getTest(){
           return this.$store.state.count;
       }
    }

    3.第三种:通过getters取值(即相当于通过状态管理中的计算属性取值)

    <p>count:{{$store.getters.getCount}}</p>
    //在stores.js中
    //
    状态管理中的计算属性 getters:{ getCount(state){ return state.count+=2; }, },

    4.第四种:通过mapState 辅助函数取值

      <h1>hello ,{{count}}</h1>
    //组件中HelloWorld中
    
    import { mapState} from 'vuex';
    export default {
         computed:{
            ...mapState(['count'])
          },
    }

    5.第五种:通过mapGetters 辅助函数取值

      

    <h2>{{getCount}}</h2>
    //在stores.js中getters中必须存在相应的方法getCount()
     // 状态管理中的计算属性  
    getters:{
      getCount(state){
    return state.count+=2; },
    },
    //在组件HelloWorld.vue中使用
    import { mapGetters} from 'vuex';
     computed:{
        ...mapGetters(['getCount']),//相当于this.getCount = this.$store.getters.getCount
     },

       

    同步时,如何修改count?如果传参?

    在helloWorld.vue 的template中

         <p>
            <!-- 第一种:写在函数里 -->

          <!--不传参-->
          <button @click="addCount()">加</button>

          <!--传参-->
    <button @click="add(5)"></button>

           <!-- 第二种:直接写表达式 --> <!-- 通过commit修改mutations中的,commit('xxxx',n) xxx代表mutations中的xxxx方法,n表示参数--> <button @click="$store.commit('add',5)">每次加5</button> </p>

    在helloWorld.vue 的script中

     add(){
          //commit触发mutations
          this.$store.commit('addCount');
     },
     addCount(){
        this.$store.commit('addCount');
     },

    等价于:   使用mapMutations辅助函数

    //将this.add映射到this.$store.commit('addCount');
    ...mapMutations({
          add:'addCount'
    }),
    //方法名与mutations中名字一样时可简写  【注:mapMutations绑定数组  ...mapMutations(['aaa','bbb']);】
    ...mapMutations(['addCount']);

    至于mapMutations如何传参暂无,还有待研究?????

    在store.js中

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      // 状态属性
      state: {
        count:0,
      },
      // 状态管理中的计算属性
      getters:{
        getCount(state){
          return state.count+=2;
        },
      },
      // 修改state中的值,需改变mutations,改变mutations需用commit
      mutations: {
        add(state,n){
          console.log('增加count');
          state.count+=n;
        },
        addCount(state){
          console.log('增加count,无参数');
          state.count++;
        },
      },
    })
    
    export default store;

    异步时,如何修改msg?如果传参?

    其实与同步操作差不多,只是要通过actions来提交mutations

    在helloWorld.vue 的template中

    <button @click="a_changeMsg()">点击后2000ms修改msg</button>  
    <p>msg:{{$store.state.msg||'暂无'}}</p>

    在helloWorld.vue 的script中

       a_reduce(){
           this.$store.dispatch('a_reduce');
        },

    等价于:

    ...mapActions({
          a_changeMsg:'a_changeMsg'
        })

    在store.js中

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      // 状态属性
      state: {
        msg:'',
      },
      // 状态管理中的计算属性
      getters:{
       
      
      },
      // 修改state中的值,需改变mutations,改变mutations需用commit
      mutations: {
        changeMsg(state){
          state.msg="我是状态管理"
        }
      },
      // 管理mutations  
      actions:{
         a_changeMsg({commit}){
          setTimeout(()=>{
            console.log('2000秒后修改msg')
            commit('changeMsg')
          },2000);
         },
      }
    })
    
    export default store;
    
    
  • 相关阅读:
    nginx 配置文件配置
    源码编译php5.4 ./configure参数
    腾讯云Linux VPS新硬盘分区与挂载教程(面板重装不丢失数据)
    十行代码带你量化交易入门
    谱聚类(转)
    随机模拟(MCMC)
    LDA 线性判别分析
    Windows10上安装Keras 和 TensorFlow-GPU
    ASCII 码
    KL距离,Kullback-Leibler Divergence
  • 原文地址:https://www.cnblogs.com/lingXie/p/11390365.html
Copyright © 2020-2023  润新知