• Vue2.0---vuex初理解


      先来一张vuex的

      

      第一眼看到这张图片我内心是万匹草泥马飞过。

      简单理解:

       vuex:一个可以全局被使用的状态管理的“仓库”:state.js中定义初始状态,通过action去触发mutation从而去改变状态。

      

      一、在src目录下:新建一文件夹store,然后在store内建一个store.js

        //引入倚赖
        import Vue from 'vue'
        import Vuex from 'vuex'
        //使用vuex
        Vue.use(Vuex);

        //引入模块
        import relationNode from './relationNode'

        

        //创建store
        export default new Vuex.Store({//这里的store一定要大写,不然会报错
          modules: {

            relationNode

          }

        })

      二、在store文件内新建某一需要使用vuex的模块文件夹如relationNode文件夹---里面我需要使用关系节点的ID以及节点的url地址

        So,在state.js中先定义初始状态index以及url。   

        export default{
          index:'',
          url:''
        }

        1、在mutations-types.js中: 

          //查询节点的id:

          export const NODE_ID = 'NODE_ID';

          //查询节点图片地址:
          export const NODE_URL='NODE_URL'

        2、在mutation.js中:   

          import * as types from './mutations-types'
          export default{
            [types.NODE_ID](state,param){
              state.index=param;
            },
            [types.NODE_URL](state,param1){
              state.url=param1;
            }
          }

        3、在action.js中:

        

          import * as types from './mutations-types'
          //节点id
          export const nodeId =({commit},param)=>{//这里nodeId 相当于一个方法,param是传递的参数----和mutation的param一致
            commit(types.NODE_ID,param);
          }
          //节点图片地址
          export const nodeUrl=({commit},param1)=>{
            commit(types.NODE_URL,param1)
          }

        4、getters.js中:(获取mutation之后的状态)

          export default {
            index: state=> state.index,
            url:state=>state.url
          }

        5、index.js中:  

          import * as actions from './actions'
          import mutations from './mutation'
          import state from './state'
          import getters from './getters'

          export default{
            state,
            mutations,
            getters,
            actions
          }

      三、在组件中使用:  

          computed: {//计算属性
            ...mapGetters({     

            param:"index",
            url:"url"

            })
          }
        在methods:{
             ...mapActions([
            'nodeId'
         }
        其中methods中的nodeId就是action.js中定义的一个方法。
     
             vuex在大型项目中还是很吊的;
  • 相关阅读:
    [奇葩问题] Error Domain=NSURLErrorDomain Code=1003
    [linux] vim在源代码中自动添加作者信息(转载)
    [shell] 循环判断输入值
    [redis] linux下主从篇(2)
    [shell] sed学习
    [linux] 查看网卡UUID
    [笔记] centos6.6编译安装httpd2.4.10
    [笔记] postgresql 流复制(streaming replication)
    ORA28000: the account is locked 查哪个具体ip地址造成
    网易客户端授权密码,errormsg='authentication failed (method LOGIN)' exitcode=EX_NOPERM
  • 原文地址:https://www.cnblogs.com/Mrfan217/p/6946060.html
Copyright © 2020-2023  润新知