Vuex使用_微x模块怎么安装使用

Vuex使用_微x模块怎么安装使用1,Vuex是一个专为Vue.js应用程序开发的状态管理模式

1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库),让其在各个页面上实现数据的共享包括状态,并且可操作
    
2,Vuex分成五个部分: 
   1.State:单一状态树
   2.Getters:状态获取
   3.Mutations:触发同步事件
   4.Actions:提交mutation,可以包含异步操作
   5.Module:将vuex进行分模块

3. vuex使用步骤
     3.1 安装
        npm install vuex@3.4.0 -S

     3.2 创建store模块,分别维护state/actions/mutations/getters
      store
            index.js
            state.js
            actions.js
            mutations.js
            getters.js 

      3.3 在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块
             const store = new Vuex.Store({state,getters,actions,mutations}) 

             Vuex使用_微x模块怎么安装使用

        3.4 在main.js中导入并使用store实例

                  new Vue({

                              el: ‘#app’,
                              router,
                              store, //在main.js中导入store实例
                              components: {

                                           App
                               },
                               template: ‘<App/>’,
                               data: {

                                   //自定义的事件总线对象,用于父子组件的通信
                                    Bus: new Vue()
                              }
                     })

Vuex使用_微x模块怎么安装使用 Vuex使用_微x模块怎么安装使用

 4. vuex的核心概念:store、state、getters、mutations、actions

      4.0 store
      每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
      const store = new Vuex.Store({

       state,    // 共同维护的一个状态,state里面可以是很多个全局状态
       getters,  // 获取数据并渲染
       actions,  // 数据的异步操作
       mutations  // 处理数据的唯一途径,state的改变或赋值只能在这里
      })
例子:

1,在state.js页面定义一个hotalname

Vuex使用_微x模块怎么安装使用

2,创建两个临时的页面,配置路由器

 ​​​​​​​Vuex使用_微x模块怎么安装使用

将Page1,Page2添加到左菜单 

Vuex使用_微x模块怎么安装使用

 方法一(不推荐):

state(保存数据的容器)
      状态,即要全局读写的数据
      const state = {

        resturantName:’飞歌餐馆’
      };

 Vuex使用_微x模块怎么安装使用

 方法二

getters(getXxx)
     获取数据并渲染,
     const getters = {

       resturantName: (state) => {

         return state.resturantName;
       }
     }; 

 注1:getters将state中定义的值暴露在this.$store.getters对象中,我们可以通过如下代码访问
          this.$store.getters.resturantName

     注2:state状态存储是响应式的,从store实例中读取状态最简单的方法就是在计算属性中返回某个状态,如下:
          computed: {

            resturantName: function() {

              return this.$store.getters.resturantName;
            }
          }

步骤一:

Vuex使用_微x模块怎么安装使用

 步骤二:

Vuex使用_微x模块怎么安装使用

 Vuex使用_微x模块怎么安装使用

4.3 mutations(setXxx)
      处理数据的唯一途径,state的改变或赋值只能在这里

      export default {

        // type(事件类型): 其值为setResturantName
        // payload:官方给它还取了一个高大上的名字:载荷,其实就是一个保存要传递参数的容器
    setResturantName: (state, payload) => {

          state.resturantName = payload.resturantName;
    }
      }

Vuex使用_微x模块怎么安装使用 

      注1:mutations中方法的调用方式
           不能直接调用this.$store.mutations.setResturantName(‘KFC’),必须使用如下方式调用:
           this.$store.commit(type,payload);
 
           // 1、把载荷和type分开提交
           store.commit(‘setResturantName’,{

             resturantName:’KFC’
           })

           // 2、载荷和type写到一起
          store.commit({

            type: ‘setResturantName’,
            resturantName: ‘KFC’
          })
           
      注2:一定要记住,Mutation 必须是同步函数。为什么呢?异步方法,我们不知道什么时候状态会发生改变,所以也就无法追踪了
           如果我们需要异步操作,Mutations就不能满足我们需求了,这时候我们就需要Actions了
           mutations: {

            someMutation (state) {

              api.callAsyncMethod(() => {

                state.count++
              })
            }
           } 

同步

 Vuex使用_微x模块怎么安装使用

 4.4 actions
      数据的静态异步(async)操作

Vuex使用_微x模块怎么安装使用

 ​​​​​​​Vuex使用_微x模块怎么安装使用

数据的动态(连接后台的) 异步(async)操作

 Vuex使用_微x模块怎么安装使用

 ​​​​​​​​​​​​​​Vuex使用_微x模块怎么安装使用

 Vuex使用_微x模块怎么安装使用​​​​​​​

今天的文章Vuex使用_微x模块怎么安装使用分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/71265.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注