• Vuex的安装、使用及注意事项


    使用Vuex的步骤:

    (1)安装:

      1.使用npm安装:

        

    1
    npm install vuex  --save

      

      2.使用script标签引入

        

    1
    2
    3
    <script src="/path/to/vue.js"></script>
     
    <script src="/path/to/vuex.js"></script>

      

      如果使用第一种方式安装Vuex插件,在使用Vuex插件之前需要在main.js入口文件中

        1‘ 使用import方式引入Vuex

          

    1
    import Vuex from ‘vuex’

      

        2‘ 使用Vue的插件引入函数Vue.use()使用Vuex

          

    1
    Vue.use(Vuex);

      

    (2)安装之后可以通过Vuex实例对象的Store方法创建一个store对象:

      

    复制代码
    var store = new Vuex.Store({
        state:{
            NewMsg:{
                Msgs:[
                    {
                        title:'暂无消息',
                        content:'暂无消息!',
                        url:'#no_msg',
                        id:'no_msg'
                    }
                ]
            },
        },
        mutations:{
            modifyMsg (state,Obj){
                if(state.NewMsg.Msgs[0].id === 'no_msg'){
                    state.NewMsg.Msgs.shift();
                }
                var obj = {
                    title:Obj.title,
                    content:Obj.content
                };
                obj.id = 'Msg_' + Obj.id;
                obj.url = '#' + obj.id;
                state.NewMsg.Msgs.push(obj);
            }
        },
        actions:{
            fetchMsg (context){
                $.ajax({
                        url:'PHP/GetMsgs.php',
                        type:'GET',
                        data:{},
                        dataType:'json',
    
                        success:function(response){
                            if ( typeof response === 'string') {
                                response = JSON.parse(response);
                            }
                            console.log(response);
                            $(response).each(function(k,v){
                                // console.log(v.id+v.title+v.content);
                                context.commit('modifyMsg',v);
                            });
                        }
                    });
            }
        }
    });
    复制代码

     

    (3)在Vue实例中注册store对象:

      

    复制代码
    new Vue({
      el: '#app',
      router,
      store,
      created (){
          store.dispatch('fetchMsg');
      },
      template: '<App/>',
      components: { App }
    })
    复制代码

    (4)在组件中使用state数据:

      必须通过computed属性使用state数据!否则state属性中的数据发生更改时不会反映在组件上!

      

    复制代码
    export default {
            computed: {
                Msgs (){
                    var Msgs = this.$store.state.NewMsg.Msgs;
                    return Msgs;
                }
            }
        }
    复制代码

    注意事项: 

      基本组成:

        注意vuex中几个核心概念:

        state、mutations、actions、 getters、module

        state:用于存储数据,类似vue实例的data属性。

        mutations:用于递交更改,对state对象中的属性数据进行更改。

        actions:用于进行递交异步更改,通过调用mutations实现对数据的更改。

        getters:可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算

        mapGetters:辅助函数,将 store 中的 getter 映射到局部计算属性:

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

        

      actions与mutations的区别:

        其中actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性

        函数执行,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

      定义actions与mutations属性函数的注意事项:

        其中定义mutations属性函数时必须传递的第一个参数是state,因为要对state进行更改,第二个参数代表传入的新参数。mutations属性函数只接受两个参数,如果要同时更

        改多个属性值,可以通过对象传入。

         在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时,必须传递的第一个参数是context,用于触发mutations函数。

      触发actions与mutations属性函数的方法:

        在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中(第三步中将会讲到)可以通过store.commit()触发。

        commit函数第一个参数是mutations的属性函数名,第二个参数是传入的新值。

        actions属性函数中可以进行异步操作,比如通过ajax或者Vue.Resource()进行数据获取,获取数据后再通过context.commit()触发更改。

         触发actions属性函数使用this.$store.dispatch()或者store.dispatch() (在注册store的Vue实例中)函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在

        Vue实例创建完成还未挂载时就从后端获取数据,则可以在created钩子函数中调用actions属性函数。

      在组件中访问数据中心state的注意事项:

        在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而

        不是通过data属性定义。如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。

    export default {
            computed: {
                Msgs (){
                    var Msgs = this.$store.state.NewMsg.Msgs;
                    return Msgs;
                }
            }
        }

      mapGetters使用:辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

    import { mapGetters } from 'vuex'
    
    export default {
      // ...
      computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
    }

      module使用注意事项:  

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象;当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

    为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态
    如果你希望使用全局 state 和 getterrootState 和 rootGetter 会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action
  • 相关阅读:
    gtest(C++单元测试框架)
    tinyXML入门
    笔记 解决vue3动态绑定本地图片失效问题
    面试技巧
    vuex 状态管理
    插槽的使用
    Vue-router 路由
    Vue组件
    (转)JS 常用 DOM
    9-26
  • 原文地址:https://www.cnblogs.com/kawask/p/10817850.html
Copyright © 2020-2023  润新知