zoukankan      html  css  js  c++  java
  • 使用Vuex的原因其作用与使用方法

    一、为什么要使用vuex

    1.1 直接举例子直观感受下:

    此时我有5个控件1 2 3 4 5 其中 1是3子组件 2是4的子组件

    当1要用3的数据时 可以直接传递 同理2用4的数据也可以直接传递,但1和2要用5的生成数据时 那就需要逐层传递, 此时就有点麻烦了,此处只传递2个控件 但设想一下 有10个控件需要传递呢?  

    1.2 使用场景【状态在组件间共享】

    能解决多个界面间的共享问题,统一响应式管理

    1. 用户登陆状态,用户、名称、头像、地理位置等 可以保存状态
    2. 商品收藏,购物车物品等【可在关闭前统一上传】
    3. 需要共享的状态信息

    二、vuex使用方法

    2.1 安装vuex

      在需要使用的路径下执行 npm install vuex --save 安装

    2.2 store引入前提

    • 在文件目录下创建store文件 将vuex仓库封装在index.js中

          

    • index.js书写【官方建议单一状态树,只将数据保存在一个store中】
      • 导入插件
      • 安装插件
      • 创建对象
      • 导出对象
    //index.js
    //
    1.导入插件 import Vue from 'vue' import Vuex from 'vuex' //2.安装插件 Vue.use(Vuex) //3.创建对象 const store = new Vuex.Store({ state:{ //共享的数据 age:18 }, mutations:{ //同步方法 类似于methods 可接收传入参数payload=》obj|arr|num increment(state,payload){ state.age++; } }, actions:{ //异步方法 updateinfo(context){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ context.commit('increment') resolve() },1000) }) } }, getters:{ //将数据处理后返回 类似于computed doubleage(state){ return function(age){ return age++; } } }, modules:{//定义模块 a:{ state:{}, mutations:{}, actions:{}, getters:{} } } }) //3.导出store模块 export default store

    下图为官方给出的vuex执行流程

    • 修改state数据只能通过mutation
    • 异步操作只能放在action中  因此只能通过action调用mutation的方法再去修改state
    •  注意vuex中数据 只能修改已存在属性

        不能直接用常规state.info['name']=cc添加 此为非响应式

        只能Vue.set(state.info,'name','cc')    此为响应式

    2.3 页面中使用

    • 当要使用时第一步先得在main.js中导入
      • 等价于定义Vue.prototype.$store=store 在原型中加入属性 所有页面可以使用  
    //main.js
    import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import store from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), router, store }).$mount('#app')
    •  vue页面使用
      • 注意点
        • 修改state数据只能通过mutation中的方法!!!!
        • 调用mutation中的方法需要用commit
        • 调用actions中的方法需要用dispatch
        • 皆有两种方式调用store中的mutation与actions
          • 1.  (‘函数名',负载参数)    【接收payload只包含payload】
          • 2.  ({

                  type:'函数名', 

                  payload1:'负载参数1',

                  payload2:'负载参数2',

                })                                           【接收payload包含整个obj】

    //test.vue
    <template> <div id="test"> <h1>{{$store.state.age}}</h1>        <!-- 直接使用state数据 --> <button @click="add"></button> <h1>{{$store.getters.doubleage}}</h1> <!-- 调用getters中函数 --> <button @click="update"></button> </div> </template> <script> export default { methods:{ add(){ //调用mutations中函数 let payload = 2 //this.$store.commit('increment',payload) 此方法在后台直接接收payload this.$store.commit({ //此方法在后台接收整个obj对象{type,payload} type:'increment', payload }) }, update(){ this.$store.dispatch('updateinfo').then(res=>{ //使用dispatch调用异步操作即actions中的函数 console.log(res) //返回的时promise对象对其进行操作 }) } } } </script> <style> </style>
  • 相关阅读:
    centos crash debug
    go get Unknown SSL protocol error in connection to gopkg.in
    Tensorflow serving with Kubernetes
    Spring 集成 Swagger UI
    Docker Registry V2 Garbage Collection
    Docker Registry V2 with Nginx
    Zabbix磁盘性能监控
    Zabbix CPU utilization监控参数
    Windows挂载Gluster复制卷
    Redis持久化存储(三)
  • 原文地址:https://www.cnblogs.com/cc123nice/p/12603649.html
Copyright © 2011-2022 走看看